Vue入門基礎（經過註冊組件修改父級屬性值）

經過註冊組件的方式修改父級的參數

若是不是經過註冊組件的方式修改的狀況下會有警告

 

Users.vue

<template >
  <div class="users">
    <ul>
        <!-- vue 遍歷須要key屬性綁定-->
        <li @click="val.isshow=!val.isshow" v-for="(val,index) in myusers" :key="index">
            <h2>{{val.name}} </h2>
            <h3 v-show="val.isshow">{{val.wechat}} </h3>
        </li>
    </ul>
    <button @click="deluser()">點擊刪除引用值</button>
    <p>{{username}}</p>
    <button @click="delusername()">點擊刪除傳值</button>
  </div>
</template>

<script>

//js 邏輯部分
export default {
  //引用父級傳值  第一種方式
  //props:["users","username"],

  //引用父級傳值  第二種方式
  props:{
    users:{
      type:Array,//指定傳參類型
      required:true //強制要求必須有該傳參
    },
    username:{

    }
  },
  name: 'users',
  data() {
    return {
      myusers:this.users   //父級的參數能夠直接引用或者再賦值
     };
  },
  methods:{
    deluser(){
      this.users.pop();
    },
    delusername(){
      //this.username="阿 我被刪除了！！！！";
      //註冊事件   參數：1 tochangeusername事件名稱  參數2...：傳值 
      this.$emit("tochangeusername","阿 我被刪除了！！！！經過組件註冊改變了");
    }
  }
}
</script>

<style scoped>
.users{
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box
}
ul{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0
}

li{
  flex-grow: 1;
  flex-basis: 200px;
  text-align: center;
  padding: 30px;
  border: 1px solid #222;
  margin: 10px;
}
</style>

App.vue

<template>
  <div id="app">
     <Header/>
    <!--使用組件   並傳遞當前組件值  傳值方式有兩種 1傳值（字符串、數值） 2引用（對象、數組）-->
    <!--綁定子組件的tochangeusername註冊事件  當子組件的事件觸發時調用 changeusername方法 -->
    <Users @tochangeusername="changeusername"  :users="users" :username="uname"/>
    <!--當傳值爲引用時  引用源被修改 相應的引用也會被修改  -->
    <Users :users="users" :username="uname"/>
    <Footer/>
  </div>
</template>

<script>
//註冊局部組件
//1 引入組件
import Users from './components/Users.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  name: 'app',
  components: { //2 註冊組件
    Users,
    Header,
    Footer
  },
  data(){
    return{
      users:[
       {name:"我是1",wechat:"1111",isshow:false},
       {name:"我是2",wechat:"1111",isshow:false},
       {name:"我是3",wechat:"1111",isshow:false},
       {name:"我是4",wechat:"1111",isshow:false},
       {name:"我是5",wechat:"1111",isshow:false},
       {name:"我是6",wechat:"1111",isshow:false}
     ],
     uname:"ERDONG",
    };
  },
  methods:{
    changeusername(newusername){
      this.uname=newusername;
    }
  }
}
</script>

<style>
 h1{
  color:red;
} 

</style>

 

運行結果  沒有了警告