2021-10-9 前端達(dá)人
目錄
我們知道在現(xiàn)在的開(kāi)發(fā)環(huán)境下,不管前后端開(kāi)發(fā)都是組件化模塊化,這是因?yàn)榻M件的優(yōu)勢(shì)無(wú)比的巨大,可以進(jìn)行多次的復(fù)用增加開(kāi)發(fā)效率,也可以分類鮮明,便于維護(hù),而我今天所寫(xiě)的就是開(kāi)發(fā)中分割成不同的組件互相傳遞數(shù)據(jù)和互動(dòng)
我的工作中常用地組件通信大致分為三類: 父?jìng)髯?, 子傳父 , 跨組件傳值
下面就來(lái)分別介紹一下 我常用的這三種傳值方法
父子組件的確認(rèn)方法:我將 B 組件import引入到 A 組件中,那么 B 就是 A 的子組件,A 就是 B 的父組件
簡(jiǎn)而言之,父?jìng)髯泳褪歉附M件把數(shù)據(jù)傳給子組件,具體就是如下,在子組件的props中定義自定義屬性來(lái)待接收父組件的數(shù)據(jù),有兩種方法 如下:
第一種,也是最推薦用的一種,以復(fù)雜類型的方式進(jìn)行聲明,這樣存儲(chǔ)的便是一個(gè)地址,可以和父組件的數(shù)據(jù)進(jìn)行雙向綁定,同步數(shù)據(jù),雖然可以雙向綁定,但是在Vue2.0中還是不可以直接在子組件中更改父組件的數(shù)據(jù),需要用到子傳父才行,這點(diǎn)等下會(huì)寫(xiě)到
這里只是用 text 舉個(gè)栗子,具體叫什么都可以哈,只是父子里面需要對(duì)應(yīng)上相同
這個(gè) text 接收到數(shù)據(jù)后的使用方法和一般data中聲明的變量一樣,只是不能再子組件中改變他
子組件中: props 定義屬性接收
-
<template>
-
<div>
-
<h2>son組件</h2>
-
<p>props:{{ text }}</p>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
// 在此處定義props
-
props: {
-
// props中定義 接收父組件數(shù)據(jù)的自定義屬性,叫什么都可以,我隨便起了個(gè)text
-
text: {
-
type: String, // type 是用來(lái)規(guī)定此屬性接收到的數(shù)據(jù)的數(shù)據(jù)類型
-
default: "未傳遞時(shí)默認(rèn)的文字" // 這個(gè)default是當(dāng)這個(gè) text 沒(méi)有接收到傳遞的數(shù)據(jù)時(shí)的默認(rèn)值
-
}
-
}
-
}
-
</script>
父組件中: 標(biāo)簽內(nèi) 傳遞數(shù)據(jù)
-
<template>
-
<div id="app">
-
<!--
-
這里的text就是子組件props里定義的text,這兩個(gè)名字得一致
-
并且傳遞的數(shù)據(jù)也要符合 type 規(guī)定的數(shù)據(jù)類型
-
text就是傳遞字符串,:text就是傳遞動(dòng)態(tài)數(shù)據(jù)
-
-->
-
<Son text="我是大娃 傳給子啦" />
-
<Son :text="wenzi" />
-
</div>
-
</template>
-
-
<script>
-
import Son from './components/son.vue';
-
export default {
-
data () {
-
return {
-
wenzi: '我是二娃 傳給子啦'
-
}
-
},
-
components: {
-
Son
-
}
-
}
-
</script>
如上 雖然我的注釋寫(xiě)的很清楚了,但是還是在介紹一下, <Son/> 是子組件的標(biāo)簽,在此標(biāo)簽的基礎(chǔ)上書(shū)寫(xiě) 子組件props 定義的屬性名,并且傳遞參數(shù)具體對(duì)應(yīng)關(guān)系和效果如下:
如上就是第一種我最常用的父?jìng)髯?其實(shí)還有一種方法,但是我一般也不用,很不方便,也貼到下邊了,這個(gè)是以數(shù)組方式聲明
-
export default {
-
// 在此處定義props
-
props: ['text']
-
}
-
</script>
-
-
剛剛說(shuō)到了在 Vue2.0 子組件不能直接改父組件的數(shù)據(jù),否則會(huì)報(bào)錯(cuò),這個(gè)解決方法就是在子組件中發(fā)起一個(gè) 自定義事件 ,在父組件監(jiān)聽(tīng)這個(gè)事件,并且定義一個(gè)函數(shù)來(lái)改變數(shù)據(jù),具體操作如下:
子組件: 發(fā)起一個(gè)自定義事件,等待父組件監(jiān)聽(tīng)到執(zhí)行函數(shù)
-
<template>
-
<div>
-
<h2>son組件</h2>
-
<p>props:{{ text }}</p>
-
<button @click="changeTextFn">改變文字</button>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
// 在此處定義props
-
props: {
-
// props中定義 接收父組件數(shù)據(jù)的自定義屬性,叫什么都可以,我隨便起了個(gè)text
-
text: {
-
type: String, // type 是用來(lái)規(guī)定此屬性接收到的數(shù)據(jù)的數(shù)據(jù)類型
-
default: "未傳遞時(shí)默認(rèn)的文字" // 這個(gè)default是當(dāng)這個(gè) text 沒(méi)有接收到傳遞的數(shù)據(jù)時(shí)的默認(rèn)值
-
}
-
},
-
-
methods: {
-
// 按鈕點(diǎn)擊事件
-
changeTextFn () {
-
// 發(fā)起自定義事件,名字叫什么都行,第一個(gè)參數(shù)是事件名,之后再跟著的都是傳遞的參數(shù)
-
this.$emit('changeFn', '我想變成三娃')
-
}
-
}
-
}
-
</script>
我先在原有的代碼上添加了一個(gè)<button>按鈕,在點(diǎn)擊調(diào)用的函數(shù)中,通過(guò) $emit 來(lái)發(fā)起事件并且可以傳遞參數(shù)
格式: this.$emit('changeFn', '我想變成三娃')
格式: this.$emit('自定義事件名', 傳遞的參數(shù))
父組件: 行內(nèi)監(jiān)聽(tīng)子組件的 自定義事件名(函數(shù)上不用寫(xiě)參數(shù),在 methods 中直接寫(xiě)形參就行)
-
<template>
-
<div id="app">
-
<Son :text="wenzi" @changeFn="changeFn" />
-
</div>
-
</template>
-
-
<script>
-
import Son from './components/son.vue';
-
export default {
-
data () {
-
return {
-
wenzi: '我是二娃 傳給子啦'
-
}
-
},
-
-
components: {
-
Son
-
},
-
-
methods: {
-
// 監(jiān)聽(tīng)子組件自定義事件
-
changeFn (newText) {
-
// 這里的形參接受到的就是子組件中 第二個(gè)參數(shù)傳遞的數(shù)值
-
this.wenzi = newText
-
}
-
}
-
}
-
</script>
對(duì)應(yīng)關(guān)系和效果圖如下:
如果兩個(gè)組件的關(guān)系非常的復(fù)雜或者沒(méi)有未產(chǎn)生直接聯(lián)系，那么通過(guò)父子組件通訊是非常麻煩的。這時(shí)候可以使用通用的組件通訊方案：事件總線（event-bus)
按照我的習(xí)慣,我會(huì)將事件總線創(chuàng)建到 main.js 中,這個(gè)使用原理是將bus掛載到Vue原型上,這樣就可以保證所有的組件都能通過(guò) this.bus 訪問(wèn)到事件總線,從而通過(guò)同一個(gè)事件總線監(jiān)聽(tīng)同一個(gè)事件,具體原理和父子傳參差不多,都是 $emit 傳遞數(shù)據(jù), 只不過(guò)接收變成了$on
我這次以送禮物舉例用了兩個(gè)關(guān)系不大的組件 分別是 男組件 和 女組件 (隨便起的名)具體如下圖:
發(fā)送數(shù)據(jù) 男組件:
this.bus.$emit('自定義事件名',傳遞的參數(shù))
-
<template>
-
<div>
-
<h1>男組件</h1>
-
<button @click="sendGiftFn">送禮物</button>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
data () {
-
return {
-
gift: '玫瑰花'
-
}
-
},
-
-
methods: {
-
sendGiftFn () {
-
// 通過(guò) bus 事件總線發(fā)起 自定義事件,并且傳遞參數(shù)(第一個(gè)是事件名,第二個(gè)開(kāi)始是參數(shù))
-
this.bus.$emit('sendMessage', this.gift)
-
}
-
}
-
}
-
</script>
接收數(shù)據(jù) 女組件:
this.bus.$on('監(jiān)聽(tīng)的事件名',(e)=>{ e這個(gè)形參所接收的就是監(jiān)聽(tīng)事件所攜帶的參數(shù)數(shù)據(jù) })
-
<template>
-
<div>
-
<h1>女組件</h1>
-
<p>來(lái)自男組件的禮物:{{ info }}</p>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
data () {
-
return {
-
info: ""
-
}
-
},
-
-
created () {
-
// e 就是 sendMessage 這個(gè)事件所傳遞的數(shù)據(jù)
-
this.bus.$on("sendMessage", (e) => {
-
this.info = e;
-
});
-
}
-
}
-
</script>
-
-
<style>
-
</style>
具體效果如下:
綜上所述,就是我在工作中總結(jié)出來(lái)的一些組建通信的方法,希望您看到這里會(huì)有所收獲
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn