abstract：父子組件之間可以通過(guò)props進(jìn)行通信：組件的定義：1.創(chuàng)建component類(lèi)：var Profile = Vue.extend({            template: "<div>Lily</div>&qu

父子組件之間可以通過(guò)props進(jìn)行通信：

組件的定義：

1.創(chuàng)建component類(lèi)：

var Profile = Vue.extend({ 
          template: "<div>Lily</div>"; 
        })

 2.注冊(cè)一個(gè)tagnme:

Vue.component("me-profile",Profile);//全局注冊(cè)

局部注冊(cè)：

var vm = new Vue({ 
 el: "#todo", 
 components: { 
  "my-profile": Profile 
 }, 
 ... 
}

模板注意事項(xiàng)：

 因?yàn)?Vue 就是原生的DOM，所以有些自定義標(biāo)簽可能不符合DOM標(biāo)準(zhǔn)，比如想在 table 中自定義一個(gè) tr，如果直接插入 my-component 不符合規(guī)范，所以應(yīng)該這樣寫(xiě)：

<table> 
 <tr is="my-component"></tr> 
</table>

在子組件中有一個(gè)this.$parent和this.$root可以用來(lái)方法父組件和跟實(shí)例。（但是不推薦）

Vue中子組件可以通過(guò)事件和父組件進(jìn)行通信。向父組件發(fā)消息是通過(guò)this.$dispatch,而向子組件發(fā)送消息是通過(guò)this.$boardcast,這里都是向所有的父組件和子組件發(fā)送消息。

子組件:

props: { 
       url: { 
             type: Array,
             default: function() { 
               return []        
             } 
          } 
     }， 
 methods: { 
  add: function() { 
   this.$dispatch("add", this.input); //這里就是向父組件發(fā)送消息 
   this.input = ""; 
  } 
 }　　

   父組件：

data() { 
     return { 
      url:  ..... 
     } 
   }， 
 events: {
  add: function(input) { 
   if(!input) return false; 
   this.list.unshift({ 
    title: input, 
    done: false 
   }); 
  } 
 }

  更多關(guān)于vuejs父子組件通信的問(wèn)題請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其他文章！