組件通訊
一、組件：組件是可復(fù)用的 Vue 實(shí)例
二晦款、創(chuàng)建組件：
1.全局組件
Vue.component('my-component-name', {
// ... 選項(xiàng) ...
})
例如：
import Vue from 'vue';
//定義一個(gè)全局組件
Vue.component('myCom1',{
template:"<div>我是組件{{ count }} <button @click='go'>click</button></div>",
data() {
return {
count:100
}
},
methods:{
go() {
console.log('我是組件1的go方法');
}
}
});
2.局部組件
var ComponentA = { /* ... */ }
然后在 components 選項(xiàng)中定義你想要使用的組件：
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
}
三苍苞、組件通訊
父?jìng)髯?
1.創(chuàng)建兩個(gè)組件A.vue和B.vue，并在A.vue中引入B.vue收厨，并注冊(cè)
2.在A.vue引入的子組件自身添加要傳遞的屬性
例如： <my-com1 :yonghu="user" :dizhi="address" :age="age"></my-com1>
3.在B組件中接收A.vue組件中傳遞過(guò)來(lái)的值，通過(guò)props接收
具體props有兩種寫(xiě)法：數(shù)組和對(duì)象（帶驗(yàn)證）
例如：
export default {
// props:['yonghu','dizhi','age'],
props:{
'yonghu':{
type:[String]
},
'dizhi':{
type:String
},
'age':{
type:Number,
default:0
}
},
子傳父：主要通過(guò)事件派發(fā)實(shí)現(xiàn)优构，具體通過(guò)$emit實(shí)現(xiàn)
派發(fā)事件：$emit()
接收事件：@事件名戒v-on
1诵叁、子組件定義事件click、change……
2钦椭、在事件中$emit派發(fā)事件拧额，及傳的參數(shù)
3、在父組件中的子組件標(biāo)簽上 @派發(fā)的事件名：定義的事件名彪腔，在定義的事件中有一個(gè)形參數(shù) 势腮，就是傳的參數(shù)
function 定義的事件名（res）{
console.log(res)
}
兄弟之間：（即非父子）
1. Event Bus:通過(guò)一個(gè)空的vue（即橋梁）實(shí)現(xiàn)兄弟之間數(shù)據(jù)傳遞
第一步：創(chuàng)建兩個(gè)兄弟組件并引入到其他組件中 例如：son1,son2
第二步：創(chuàng)建一個(gè)空的vue 例如：bus.js
第三步：分別在兩個(gè)兄弟組件中引入bus.js
第四步：例如：son1數(shù)據(jù)發(fā)送給son2,在son1通過(guò)觸發(fā)一個(gè)事件響應(yīng)來(lái)派發(fā)
import Bus from '@/components/common/bus';
<button @click="goToSon2">向son2發(fā)送數(shù)據(jù)</button>
methods:{
goToSon2() {
// 派發(fā)事件
Bus.$emit('ok',this.msg)
}
第五步：在生命周期鉤子上監(jiān)聽(tīng)son1派發(fā)過(guò)來(lái)的事件 $on
created(){
//監(jiān)聽(tīng)事件
Bus.$on('ok',(v)=>{
// console.log(v);
this.name=v;
})
}
