在學習vue時，組件學習比較吃力，尤其是組件間的通信，所以總結一下，官方文檔的組件部分。

注冊組件

全局組件

語法如下，組件模板需要使用一個根標簽包裹起來。data必須是一個方法

Vue.component('component-name',{  template:'<div><h1>標題</h1><span>作者信息</span></div>',  data(){    return{      message:'組件的屬性'    }  },  methods:{  }})

局部組件

var com = {  template:'<div><h1>標題</h1><span>作者信息</span></div>',  data(){    return{      message:'組件的屬性'    }  },  methods:{  }}new Vue({  components:{    'compontent-name':com  }})

組件通信

prop將父組件數據傳給子組件

 <div id='app'>   <child :msg=message></child> </div>

<script>  Vue.component('child', {    props: ['msg'],    template: '<p>{{msg}}</p>'  })  new Vue({    el: '#app',    data: {      message: '父組件數據'    }  })</script>

利用子組件的props選項，父組件可以向子組件傳遞數據，但是子組件不能求改父組件的數據。

非父子組件通信

需要使用一個空的Vue實例來管理

<div id='app'>  <com-a></com-a>  <com-b></com-b></div>

var bus = new Vue();var coma = {  template: '<p @click="send">{{adata}}</p>',  data(){    return {      adata: 'a的數據'    }  },  methods:{    send(){      // 觸發這一事件      bus.$emit('data-to-b', this.adata);    }  }  };var comb= {  template: '<p>{{bdata}}</p>',  data(){    return {      bdata: 'b的數據'    }  },  mounted(){    // 監聽事件，獲取a組件的數據，進行相關操作    bus.$on('data-to-b', function (msg) {      this.bdata = msg;    }.bind(this));  }};new Vue({  el:'#app',  components: {    'com-a': coma,    'com-b': comb  }})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。