父子元件通訊：
（1）父元件向子元件通訊prop,子元件向父元件通訊$emit
vue.component(
'childcompont',
}, template:`
"text" v-model=
"mymessage" @input=
"passdata(mymessage)"
>
`,//get message from parent compont
props:[
'message'
], methods:}}
) vue.component(
'parent',
}, methods:}}
))
2).子元件通過props得到相關的message資料,最後通過this.$emit觸發了getchilddata事件。
關於級聯元件的通訊處理：（關於級聯元件就是 a 元件 包含b子元件,b元件包含c子元件）
vue.component(
'c',}}
) vue.component(
'b',
}, template:`
"text" v-model=
"mymessage" @input=
"passdata(mymessage)"
>
<
!-- c元件中能直接觸發getcdata的原因在於 b元件呼叫c元件時 使用 v-on 繫結了$listeners 屬性 -->
<
!-- 通過v-bind 繫結$attrs屬性，c元件可以直接獲取到a元件中傳遞下來的props（除了b元件中props宣告的） -->
"$attrs" v-on=
"$listeners"
>
`,//得到父元件傳遞過來的資料
props:[
'message'
], methods:}}
) vue.component(
'a',
}, methods:,
//執行c子元件觸發的事件
getcdata(val)}}
))
對於非父子元件的通訊，使用**匯流排bus來進行，使用bus.emi
t進行觸
發事件，
使用bu
s.
emit進行觸發事件，使用bus.
emit進行
觸發事件
，使用b
us.on進行事件的監聽。
vue.component(
'brother1',
}, template:`
this is brother1 compoent!
"text" v-model=
"mymessage" @input=
"passdata(mymessage)"
>
`,methods:}}
) vue.component(
'brother2',}
`,data()},
mounted())
}}) //**事件匯流排
var bus=new vue();
)
vue.component(
'child',,
data()},
methods:
}, template:`
"text" v-model=
"mymessage" @change=
"changevalue"
>
})vue.component(
'parent',}
"message"
>
`, data()}
}))
$parent 和 $children:
vue.component(
'child',,
data()},
methods:
}, template:`
"text" v-model=
"mymessage" @change=
"changevalue"
>
})vue.component(
'parent',
}, data()}
}))
vue1.0中提供了這種方式，但vue2.0中沒有，但很多開源軟體都自己封裝了這種方式，比如min ui、element ui和iview等。
比如如下**，一般都作為乙個mixins去使用, broadcast是向特定的父元件，觸發事件，dispatch是向特定的子元件觸發事件，本質上這種方式還是on和emit的封裝，但在一些基礎元件中卻很實用。
function broadcast(componentname, eventname, params)
else})
;}export default }if
(parent)
}, broadcast(componentname, eventname, params)}}
;
VUE 元件（二）元件通訊
元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時，就要用到自定義事件 子元件用 emit 來觸發事件，父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果，在改變元件data中的count後，通過 emit 將值傳給父元件，父元件用v o...
vue學習筆記（五） 元件通訊
關於vue父子元件通訊 github suerimn 如果元件是乙個單頁面，元件之間存在父子關係，資料傳遞就需要根據父子不同的地位使用不同的辦法。借助新建的electron vue專案自帶的兩個元件來說明。目錄結構如下 其中landingpage.vue是父元件，systeminformation....
Vue 二 元件間通訊
父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣，右邊表示父元件中的資料元素 name name job job namewasreset name event res...