在學(xué)習(xí)vue時，組件學(xué)習(xí)比較吃力，尤其是組件間的通信，所以總結(jié)一下，官方文檔的組件部分。
注冊組件
全局組件
語法如下，組件模板需要使用一個根標簽包裹起來。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將父組件數(shù)據(jù)傳給子組件
<div id='app'> <child :msg=message></child> </div>
<script> Vue.component('child', { props: ['msg'], template: '<p>{{msg}}</p>' }) new Vue({ el: '#app', data: { message: '父組件數(shù)據(jù)' } })</script>利用子組件的props選項，父組件可以向子組件傳遞數(shù)據(jù)，但是子組件不能求改父組件的數(shù)據(jù)。
非父子組件通信
需要使用一個空的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的數(shù)據(jù)' } }, methods:{ send(){ // 觸發(fā)這一事件 bus.$emit('data-to-b', this.adata); } } };var comb= { template: '<p>{{bdata}}</p>', data(){ return { bdata: 'b的數(shù)據(jù)' } }, mounted(){ // 監(jiān)聽事件，獲取a組件的數(shù)據(jù)，進行相關(guān)操作 bus.$on('data-to-b', function (msg) { this.bdata = msg; }.bind(this)); }};new Vue({ el:'#app', components: { 'com-a': coma, 'com-b': comb }})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
