一、父子組件傳值
1、父傳子
（1）props
父組件向子組件傳值，可以通過綁定屬性傳值；子組件通過props接收父組件傳值。
父組件：
<div class="animal">
<h2>動物</h2>
<Bird :name="name1" :age="age1" ></Bird>
</div>
data() {
return {
name1:'大雁',
age1:20
}
}
子組件：
<div class="animal">
<h2>動物</h2>
<div>名稱：{{name}}</div>
<div>年齡：{{age}}</div>
</div>
// 接收父組件傳值
props: ["name", "age"]
（2）$attrs
父級傳過來的數據，子級如果沒有用props去接，這些屬性會保存到$attrs對象中。
//通過props接收父組件傳過來的值
props:['name','age','updateHomeAddress'],
mounted() {
// 父級傳過來的數據，子級如果沒有用props去接，這些屬性會保存到$attrs對象中
console.log(this.$attrs);
},
data() {
return {
myName:this.name,
myAge:this.age,
mySex:this.$attrs.sex,
myAddress:this.$attrs.address
}
},
methods: {
//修改地址
updateAddress(){
//修改當前組件的地址
this.myAddress = '北京'
//調用父級傳過來的方法，修改父級的地址
this.updateHomeAddress('北京')
}
}
2、子傳父
子組件通過$emit觸發一個自定義事件，將更新的數據傳給父組件。
子組件：
<div class="bird">
<h2>鳥類</h2>
<div>名稱：{{ myName }}</div>
<div>年齡：{{ myAge }}</div>
<button @click="updateData">修改信息</button>
</div>
props: ["name", "age"],
data() {
return {
myname: this.name,
myage: this.age,
};
},
methods: {
updateData() {
this.myname = "仙鶴";
this.myage = 10;
this.$emit("updateData", {name: this.myname,age: this.myage});
}
}
父組件：
<div class="animal">
<h2>動物</h2>
<div>名稱：{{name1}}</div>
<div>年齡：{{age1}}</div>
<Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
</div>
data() {
return {
name1:'大雁',
age1:20
}
},
methods: {
// 該方法，修改name1和age1數據
updateData(e) {
this.name1 = e.name;
this.age1 = e.age;
}
}
二、祖孫組件傳值
首先祖先給子孫后代傳值也是可以用props傳遞，一層層傳遞，如果嵌套了五六層，這種方法就顯得很繁瑣。
所以就用到了provide(提供)和inject(注入)。這兩個是配套使用的，以允許祖先向所有祖先后代注入一個依賴。祖先組件通過provide添加依賴數據，它里面定義的數據，后代組件可以通過inject選擇性注入并直接使用。
注意：后代組件通過inject注入祖級組件中的依賴數據，跟props一樣，接收的數據是只讀的，不能修改。
祖先組件：
<div class="animal">
<div>名稱：{{ name2 }}</div>
<div>年齡：{{ age2 }}</div>
<Bird :name="name1" :age="age1" ></Bird>
</div>
data() {
return {
name2: "小明",
age2: 5
};
}
// 添加依賴數據，它里面定義的數據，子組件可以選擇性注入并直接使用。
provide() {
return {
doveName: this.name2,
doveAge: this.age2,
// 將修改name2和age2的方法，設置為依賴數據
updateDove: this.updateDove,
};
},
methods: {
updateDove(dove) {
this.name2 = dove.name;
this.age2 = dove.age;
},
}
后代組件：
<div class="dove">
<h2>鴿子</h2>
<div>名稱：{{ mydoveName }}</div>
<div>年齡：{{ mydoveAge }}</div>
<button @click="updateData">修改數據</button>
</div>
// 從父級組件中注入依賴的數據
inject: ["doveName", "doveAge", "updateDove"],
data() {
return {
mydoveName: this.doveName,
mydoveAge: this.doveAge,
};
},
methods: {
updateData() {
this.mydoveName = "小紅";
this.mydoveAge = 8;
// 執行父級組件中的updateDove方法
this.updateDove({ name: this.mydoveName,age: this.mydoveAge, });
}
}
三、兄弟組件傳值
在Vue的原型對象上，添加一個$bus屬性，該屬性的的屬性值是一個Vue實例。Vue的所有實例，都將共用同一個$bus。這個$bus屬性，我們稱之為：中央事件總線。
vm.$emit( eventName, […args] )：觸發當前實例上的事件。附加參數都會傳給監聽器回調。
vm.$on( event, callback )：監聽當前實例上的自定義事件。事件可以由 vm.$emit 觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
vm.$once( event, callback )：監聽一個自定義事件，但是只觸發一次。一旦觸發之后，監聽器就會被移除。
vm.$off( [event, callback] )：移除自定義事件監聽器。
main.js文件：
Vue.prototype.$bus = new Vue()
兄弟A鴿子組件：
點擊鴿子組件中的‘修改烏鴉數據’按鈕，可以修改烏鴉組件頁面的數據。
<div class="dove">
<h2>鴿子</h2>
<button @click="updateCrow">修改烏鴉數據</button>
</div>
methods: {
updateCrow() {
this.$bus.$emit("updateCrow", { name: "小黃", age: 20 });
}
}
兄弟B烏鴉組件：
<div class="crow">
<h2>烏鴉</h2>
<div>名稱：{{ name }}</div>
<div>年齡：{{ age }}</div>
</div>
data() {
return {
name: "小劉",
age: 20,
};
},
mounted() {
// 監聽updateCrow事件，當該事件觸發時，會執行對應的回調函數
this.$bus.$on("updateCrow", (e) => {
this.name = e.name;
this.age = e.age;
});
}
