元件之間通訊方式

i. 父子元件傳值

props down, events up

屬性驗證

props:{name:Number}

Number,String,Boolean,Array,Object,Function,null(不限制類型)

ii. Ref

this.$refs.child

iii. 事件匯流排

var bus = new Vue()

*mounted生命週期中進行監聽

iv 關係鏈(viewmodel鏈)

this.$parent.xxx

    <div id="app">
     <aaa></aaa>
   </div>
​
   <template id="aaa">
     <div>
       <p>這是A元件...</p>
       <input type="text" v-model="msg">
       <hr>
       <bbb :msg="msg"></bbb> 
     </div>
   </template>
   <template id="bbb">
     <div>
       <input type="text" v-model="ownMsg">
     </div>
   </template>
​
​
​
​
​
Vue.component("aaa",{
     template:"#aaa",
     data(){
       return {
         msg:"hello"
       }
     }
   })
   Vue.component("bbb",{
     template:"#bbb",
     props:["msg"],  //在props裡面定義的資料，元件內部使用仍然通過this訪問
     computed:{
       ownMsg:{
         get(){
           return this.msg
         },
         set(val){
           console.log(this)
           //希望a元件的msg進行更改
           this.$parent.msg = val
         }
       }
     }
   })
  
​
​
​
   var vm = new Vue({
     el:"#app"
   })