Vue組件通信深入分析
更新時(shí)間：2022年08月05日 10:57:42 作者：飯啊飯°
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)
一、組件間的通信方式分類
- 父子組件之間的通信；
- 兄弟組件之間的通信；
- 祖孫與后代組件之間的通信；
- 非關(guān)系組件之間的通信。
二、props傳遞數(shù)據(jù)
適用場景：父組件傳遞數(shù)據(jù)給子組件；
- 子組件設(shè)置props屬性，定義接收父組件傳遞過來的參數(shù)；
- 父組件在使用子組件標(biāo)簽中通過字面量來傳遞值
Person.vue
<template>
<div>
Person
<Student1 name="jack" age="18"></Student1>
</div>
</template>
<script>
import Student1 from './Student1'
export default {
name: 'Person',
components: {
Student1,
},
</script>Student1.vue
<template>
<div>
Student1
{{name}},{{age}}
</div>
</template>
<script>
export default {
name: 'Student1',
props: {
name: String,
age:Number,
}
}
</script>效果
三、$emit 觸發(fā)自定義事件
- 適用場景：子組件傳遞數(shù)據(jù)給父組件
- 子組件通過
$emit觸發(fā)自定義事件，$emit第二個(gè)參數(shù)為傳遞的數(shù)值; - 父組件綁定監(jiān)聽器獲取到子組件傳遞過來的參數(shù)。
Student1.vue
<template>
<div>
Student1
<button @click="giveData()">點(diǎn)我傳遞數(shù)據(jù)</button>
</div>
</template>
<script>
export default {
name: 'Student1',
methods: {
giveData() {
this.$emit('add', '12345');
}
},
}
</script>Person.vue
<template>
<div>
Person
<Student1 @add="cartAdd($event)"></Student1>
</div>
</template>
<script>
import Student1 from './Student1'
export default {
name: 'Person',
components: {
Student1,
},
methods: {
cartAdd(event) {
console.log(event);
}
},
}
</script>四、ref標(biāo)記
- 使用場景：子組件傳遞數(shù)據(jù)給父組件
- 父組件在使用子組件的時(shí)候設(shè)置ref
- 父組件通過設(shè)置子組件ref來獲取數(shù)據(jù)
<template>
<div>
Person
<Student2 ref="foo"></Student2>
<button @click="getRef()">點(diǎn)擊獲取ref數(shù)據(jù)</button>
</div>
</template>
<script>
import Student2 from "./Student2";
export default {
name: "Person",
components: {
Student2,
},
methods: {
getRef() {
console.log(this.$refs.foo);
},
},
};
</script>效果
五、EventBus事件總線
- 使用場景：任意組件傳值
- 創(chuàng)建一個(gè)中央事件總線EventBus
- 兄弟組件通過
$emit觸發(fā)自定義事件，$emit第二個(gè)參數(shù)為傳遞的數(shù)值 - 另一個(gè)兄弟組件通過
$on監(jiān)聽自定義事件
main.js
beforeCreate() {
Vue.prototype.$bus = this
}
Student2.vue
<template>
<div>
Student2
<button @click="getBus()">點(diǎn)我獲取全局事件總線數(shù)據(jù)</button>
</div>
</template>
<script>
export default {
name: 'Student2',
data() {
return {
name: 'fanafan',
age:'17'
}
},
methods:{
getBus(){
this.$bus.$emit('bus',this.name)
}
}
}
</script>Student1.vue
mounted() {
this.$bus.$on('bus', (data) => {
console.log(data)
})
},六、$parent 或 $root
使用方法類似全局事件總結(jié)
Vue.prototype.$parent = this
// 傳數(shù)據(jù)
this.$parent.$emit('parent',this.age)
//接數(shù)據(jù)
this.$parent.$on('parent', (data) => {
console.log(data);
})七、vuex
- 使用場景：復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞
- Vuex是一個(gè)用來存儲(chǔ)共享變量的容器
- state：用來存放共享遍歷的地方；
- getter：可以增加一個(gè)getter派生狀態(tài)，用來獲得共享變量的值；
- mutations：用來存放修改state的方法；
- actions也是用來存放修改state的方法，不過action是在mutations的基礎(chǔ)上進(jìn)行的。常用來做一些異步操作。
八、總結(jié)
- 父——>子：props；
- 子——>父：$emit,ref；
- 兄弟——>兄弟，任意——>任意：$bus。
- 復(fù)雜關(guān)系：vuex。
到此這篇關(guān)于Vue組件通信深入分析的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3 獲取元素高度不準(zhǔn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue是一款非常流行的JavaScript框架,它提供了許多方便開發(fā)者的功能,本文將介紹如何通過Vue路由改變地址欄的參數(shù),感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了基于javascript的拖拽類封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue中使用vue-router切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法，一般使用Window scrollTo() 方法實(shí)現(xiàn)，本文給大家簡單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue項(xiàng)目依賴包安裝及配置過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了vue下載文件以及文件重命名方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 修改 data 數(shù)據(jù)問題并實(shí)時(shí)顯示的方法
今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問題并實(shí)時(shí)顯示的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
解決vue單頁面應(yīng)用打包后相對路徑、絕對路徑相關(guān)問題
這篇文章主要介紹了解決vue單頁面應(yīng)用打包后相對路徑、絕對路徑相關(guān)問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
對于中小型企業(yè),vue應(yīng)用越來越多,學(xué)習(xí)vue相對于react的成本要低點(diǎn),入門相對簡單。這篇文章主要給大家介紹了關(guān)于Vue接口封裝的相關(guān)資料,需要的朋友可以參考下2021-05-05