總結一下對vue組件通信的理解和使用刚夺。
一献丑、組件目錄結構
- 父組件：app.vue
- 子組件：page1.vue
- 子組件：page2.vue
父組件 app.vue
<template>
<div id="app">
<p>請輸入單價: <input type="text" v-model="price"></p>
<page1 :price="price" @downPrice="downPrice"></page1>
<page2></page2>
</div>
</template>
<script>
import Page1 from "./components/page1";
import Page2 from "./components/page2";
export default {
name: "App",
data() {
return {
price: ""
};
},
components: {
Page1,
Page2
},
methods: {
downPrice() {
this.price = (this.price - 1).toString();
}
}
};
</script>
子組件 page1.vue
<template>
<div>
<p><span>單價：</span><span>{{price}}</span> <button @click="downPrice">降價1元</button></p>
<p>數(shù)量: {{count}} </p>
</div>
</template>
<script>
import bus from '../eventBus.js'
export default {
props:{
price:{
type:String,
default:''
}
},
data(){
return{
count:10
}
},
methods:{
downPrice(){
this.$emit('downPrice')
}
},
watch:{
price(newPrice){
bus.$emit('priceChange',newPrice,this.count)
}
}
}
</script>
子組件 page2.vue
<template>
<div>
<p>
<span>總金額：{{totalMoney}}元 </span>剩余金額：
<span>{{balance}}元</span>
</p>
</div>
</template>
<script>
import bus from "../eventBus.js";
export default {
data() {
return {
balance: 1000,
totalMoney: 1000
};
},
mounted() {
bus.$on("priceChange", (price, count) => {
this.balance = this.totalMoney - price * count;
});
}
};
</script>
二、通信過程介紹
1.父組件向子組件傳值
1.1在父組件中引入需要通信的子組件
import Page1 from "./components/page1";
1.2 在父組件的components中注冊該子組件
components: {
Page1
}
1.3 在父組件的template中使用子組件
<page1></page1>
1.4 將需要傳遞給子組件的值通過v-bind(如果傳遞的是固定值侠姑，則不需要v-bind创橄，直接屬性名，屬性值傳遞即可)莽红。
<page1 :price="price"></page1>
// 此處的price則是傳遞給子組件的值
1.5 在對應的子組件中妥畏，通過props屬性接收傳遞過來的值
props:{
price:{
type:String,
default:''
}
}
1.6 在子組件中使用該值
<p><span>單價：</span><span>{{price}}</span></p>
2.子組件向父組件中傳值
2.1 在page1.vue中，通過觸發(fā)子組件的方法(這里是自定義的downPrice方法),
<p><span>單價：</span><span>{{price}}</span> <button @click="downPrice">降價1元</button></p>
2.2 在子組件的methods的downPrice中安吁，通過this.$emit(),將事件和參數(shù)傳遞給父組件
downPrice(count){
this.$emit('downPrice',count)
}
// downPrice 是傳遞給父組件的事件醉蚁，父組件觸發(fā)并相應這個方法
// count 傳遞給父組件的參數(shù)，在父組件中鬼店，可以對和這個參數(shù)進行相應操作
2.3 在父組件中接受子組件傳遞的事件downPrice和數(shù)據(jù)
<page1 :price="price" @downPrice="downPrice"></page1>
2.4 父組件對接收到的事件和數(shù)據(jù)做出相應
downPrice(count) {
this.price = (this.price - 1).toString();
// this.price = (this.price - count).toString();
}
3网棍、父組件調用子組件方法
方法一：
3.1 在使用子組件時，給子組件加一個ref引用
<page1 :price="price" @downPrice="downPrice" ref="page1"></page1>
3.2 父組件通過this.$refs即可找到該子組件妇智，也可以操作子組件的方法
this.$refs.page1.子組件方法
打印出獲取到的子組件信息：
image.png
方法二：
3.3 通過$children,可以獲取到所有子組件的集合
this.$children[0].某個方法
4滥玷、子組件調用父組件方法
4.1 通過 $parent可以找到父組件，進而調用其方法
this.$parent.父組件方法
打印出的父組件信息
image.png
5巍棱、平級組件通信
同級組件不能直接傳值惑畴，需要一個中間橋梁，可以先將數(shù)據(jù)傳遞給公共的父組件航徙，然后父組件再將數(shù)據(jù)傳遞給需要的子組件如贷。
5.1 定義一個公共文件 eventBus.js
代碼很簡單(就2句)，只是創(chuàng)建一個空的vue實例
import Vue from 'vue'
export default new Vue()
5.2 在需要通信的同級組件中分別引入eventBus.js文件
import bus from '../eventBus.js'
5.3 在page1.vue中，通過$emit將事件和參數(shù)傳遞給page2.vue
price(newPrice){
bus.$emit('priceChange',newPrice,this.count)
}
5.4 在page2.vue 中杠袱，通過$on接收接收參數(shù)和相應事件
bus.$on("priceChange", (price, count) => {
this.balance = this.totalMoney - price * count;
});
一般大型的項目泻红，推薦使用Vuex來管理組件之間的通信
