資訊專欄INFORMATION COLUMN
總結(jié)一下對(duì)vue組件通信的理解和使用。一、組件目錄結(jié)構(gòu)
父組件：app.vue
子組件：page1.vue
子組件：page2.vue
父組件 app.vue子組件 page1.vue請(qǐng)輸入單價(jià):
單價(jià)：{{price}}
數(shù)量: {{count}}
子組件 page2.vue
總金額：{{totalMoney}}元 剩余金額：
{{balance}}元
二、通信過程介紹
1.父組件向子組件傳值
1.1在父組件中引入需要通信的子組件
import Page1 from "./components/page1";1.2 在父組件的components中注冊(cè)該子組件
components: {
Page1
}
1.3 在父組件的template中使用子組件
1.4 將需要傳遞給子組件的值通過v-bind(如果傳遞的是固定值，則不需要v-bind，直接屬性名，屬性值傳遞即可)。
1.5 在對(duì)應(yīng)的子組件中，通過props屬性接收傳遞過來的值// 此處的price則是傳遞給子組件的值
props:{
price:{
type:String,
default:""
}
}
1.6 在子組件中使用該值
2.子組件向父組件中傳值 2.1 在page1.vue中，通過觸發(fā)子組件的方法(這里是自定義的downPrice方法),單價(jià)：{{price}}
2.2 在子組件的methods的downPrice中，通過this.$emit(),將事件和參數(shù)傳遞給父組件單價(jià)：{{price}}
downPrice(count){
this.$emit("downPrice",count)
}
// downPrice 是傳遞給父組件的事件，父組件觸發(fā)并相應(yīng)這個(gè)方法
// count 傳遞給父組件的參數(shù)，在父組件中，可以對(duì)和這個(gè)參數(shù)進(jìn)行相應(yīng)操作
2.3 在父組件中接受子組件傳遞的事件downPrice和數(shù)據(jù)
2.4 父組件對(duì)接收到的事件和數(shù)據(jù)做出響應(yīng)
downPrice(count) {
this.price = (this.price - 1).toString();
// this.price = (this.price - count).toString();
}
3、父組件調(diào)用子組件方法
方法一：
3.1 在使用子組件時(shí)，給子組件加一個(gè)ref引用3.2 父組件通過this.$refs即可找到該子組件，也可以操作子組件的方法
this.$refs.page1.子組件方法
打印出獲取到的子組件信息：
方法二：
3.3 通過$children,可以獲取到所有子組件的集合this.$children[0].某個(gè)方法4、子組件調(diào)用父組件方法 4.1 通過 $parent可以找到父組件，進(jìn)而調(diào)用其方法
this.$parent.父組件方法
打印出的父組件信息
同級(jí)組件不能直接傳值，需要一個(gè)中間橋梁，可以先將數(shù)據(jù)傳遞給公共的父組件，然后父組件再將數(shù)據(jù)傳遞給需要的子組件。
5.1 定義一個(gè)公共文件 eventBus.js代碼很簡(jiǎn)單(就2句)，只是創(chuàng)建一個(gè)空的vue實(shí)例
import Vue from "vue" export default new Vue()5.2 在需要通信的同級(jí)組件中分別引入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ù)和相應(yīng)事件
bus.$on("priceChange", (price, count) => {
this.balance = this.totalMoney - price * count;
});
一般大型的項(xiàng)目，推薦使用Vuex來管理組件之間的通信
如果對(duì)道友你有幫助，請(qǐng)收藏和點(diǎn)贊，如果覺得有問題，歡迎留言指出，demo查看
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89565.html
總結(jié)一下對(duì)vue組件通信的理解和使用。 一、組件目錄結(jié)構(gòu) 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請(qǐng)輸入單價(jià): import Page1 from ./components/page1; import Page2 from ./components/page2; export de...
摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...
摘要：為此可以使用為子組件指定一個(gè)索引。訪問子組件當(dāng)和一起使用時(shí)，是一個(gè)數(shù)組或?qū)ο?，包含相?yīng)的子組件。 父子通信目前有四種方式： 1.父組件傳遞數(shù)據(jù)給子組件父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實(shí)現(xiàn)父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數(shù)據(jù):方式1：props: [childMs...
摘要：當(dāng)一個(gè)組件沒有聲明任何時(shí)，這里會(huì)包含所有父作用域的綁定和除外，并且可以通過傳入內(nèi)部組件在創(chuàng)建高級(jí)別的組件時(shí)非常有用。 寫在前面 組件間的通信是是實(shí)際開發(fā)中非常常用的一環(huán)，如何使用對(duì)項(xiàng)目整體設(shè)計(jì)、開發(fā)、規(guī)范都有很實(shí)際的的作用，我在項(xiàng)目開發(fā)中對(duì)此深有體會(huì)，總結(jié)下vue組件間通信的幾種方式，討論下各自的使用場(chǎng)景 文章對(duì)相關(guān)場(chǎng)景預(yù)覽 父->子組件間的數(shù)據(jù)傳遞 子->父組件間的數(shù)據(jù)傳遞 兄弟...
摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...
閱讀 3569·2021-10-18 13:30
閱讀 3012·2021-10-09 09:44
閱讀 2036·2019-08-30 11:26
閱讀 2431·2019-08-29 13:17
閱讀 814·2019-08-29 12:17
閱讀 2314·2019-08-26 18:42
閱讀 578·2019-08-26 13:24
閱讀 3013·2019-08-26 11:39
