vue組件間屬性傳值的常用的方法和規(guī)范詳解
一. 父組件向子組件傳值（Props）
1.規(guī)范：父組件通過(guò)屬性（props）向子組件傳遞數(shù)據(jù)。子組件需要在props選項(xiàng)中聲明這些屬性。
2.代碼演示：
（1） 父組件：
<template>
<div>
<child-component :parent-data="dataFromParent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
dataFromParent: '這是來(lái)自父組件的數(shù)據(jù)'
};
}
};
</script>
（2） 子組件：
<template>
<div>
{{ parentData }}
</div>
</template>
<script>
export default {
props: {
parentData: String
}
};
</script>
解說(shuō)：父組件使用v-bind（或簡(jiǎn)寫為:）將dataFromParent屬性傳遞給子組件。子組件通過(guò)聲明props來(lái)接收這個(gè)數(shù)據(jù)，并可以在模板中使用它。
二. 子組件向父組件傳值（Events）
1.規(guī)范：子組件通過(guò)發(fā)射事件（$emit）向父組件傳遞數(shù)據(jù)。父組件通過(guò)監(jiān)聽這些事件來(lái)接收數(shù)據(jù)。
2.代碼演示：
（1）子組件：
<template>
<div>
<button @click="sendDataToParent">發(fā)送數(shù)據(jù)到父組件</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('dataToSend', '這是子組件發(fā)送的數(shù)據(jù)');
}
}
};
</script>
（2）父組件：
<template>
<div>
<child-component @dataToSend="handleDataFromChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
???????export default {
components: {
ChildComponent
},
methods: {
handleDataFromChild(data) {
console.log(data); // 輸出：這是子組件發(fā)送的數(shù)據(jù)
}
}
};
</script>解說(shuō)：子組件通過(guò)this.$emit觸發(fā)一個(gè)事件，并傳遞數(shù)據(jù)。父組件通過(guò)v-on（或簡(jiǎn)寫為@）監(jiān)聽這個(gè)事件，并在事件處理函數(shù)中接收數(shù)據(jù)。
三. 兄弟組件傳值（Event Bus）
1.規(guī)范：兄弟組件可以通過(guò)一個(gè)共同的父組件或使用全局事件總線（Event Bus）來(lái)傳遞數(shù)據(jù)。
2.代碼演示：
（1）Event Bus：
// event-bus.js import Vue from 'vue'; export const EventBus = new Vue();
（2）兄弟組件A（發(fā)送數(shù)據(jù)）：
<template>
<div>
<button @click="sendData">發(fā)送數(shù)據(jù)到兄弟組件</button>
</div>
</template>
<script>
import { EventBus } from './event-bus.js';
???????export default {
methods: {
sendData() {
EventBus.$emit('data-to-brother', '這是來(lái)自兄弟組件A的數(shù)據(jù)');
}
}
};
</script>（3）兄弟組件B（接收數(shù)據(jù)）：
<template>
<div>
<div>{{ dataFromBrother }}</div>
</div>
</template>
<script>
import { EventBus } from './event-bus.js';
???????export default {
data() {
return {
dataFromBrother: ''
};
},
created() {
EventBus.$on('data-to-brother', this.receiveData);
},
methods: {
receiveData(data) {
this.dataFromBrother = data;
}
},
beforeDestroy() {
EventBus.$off('data-to-brother', this.receiveData);
}
};
</script>3.代碼講解
這段代碼是一個(gè) Vue.js 組件的示例，它使用了 Vue 的事件總線（Event Bus）來(lái)接收來(lái)自兄弟組件的數(shù)據(jù)，并將其顯示在模板中。以下是對(duì)代碼的詳細(xì)解釋：
代碼結(jié)構(gòu)
模板部分 (<template>):
- 這是一個(gè)簡(jiǎn)單的 Vue 模板，包含一個(gè) div 元素，用于顯示從兄弟組件接收到的數(shù)據(jù)。
- {{ dataFromBrother }} 是 Vue 的插值語(yǔ)法，用于動(dòng)態(tài)綁定數(shù)據(jù)。
腳本部分 (<script>):
定義了一個(gè) Vue 組件，包含 data、created、methods 和 beforeDestroy 生命周期鉤子。
代碼詳細(xì)解釋
1.數(shù)據(jù)綁定
data() {
return {
dataFromBrother: ''
};
}
data 是 Vue 組件的選項(xiàng)，用于定義組件的響應(yīng)式數(shù)據(jù)。
dataFromBrother 是一個(gè)字符串，用于存儲(chǔ)從兄弟組件接收到的數(shù)據(jù)。
2. 事件監(jiān)聽
created() {
EventBus.$on('data-to-brother', this.receiveData);
}
created 是 Vue 的生命周期鉤子，表示組件實(shí)例被創(chuàng)建后執(zhí)行的代碼。
EventBus.$on 是事件總線的監(jiān)聽方法，用于監(jiān)聽事件 'data-to-brother'。
當(dāng)事件 'data-to-brother' 被觸發(fā)時(shí)，調(diào)用 this.receiveData 方法。
3. 數(shù)據(jù)接收
methods: {
receiveData(data) {
this.dataFromBrother = data;
}
}
methods 是 Vue 組件的選項(xiàng)，用于定義組件的方法。
receiveData 是一個(gè)方法，接收一個(gè)參數(shù) data，并將該數(shù)據(jù)賦值給 dataFromBrother。
4. 事件解綁
beforeDestroy() {
EventBus.$off('data-to-brother', this.receiveData);
}
beforeDestroy 是 Vue 的生命周期鉤子，表示組件銷毀之前執(zhí)行的代碼。
EventBus.$off 是事件總線的解綁方法，用于移除事件 'data-to-brother' 的監(jiān)聽器。
這一步非常重要，避免內(nèi)存泄漏和不必要的事件觸發(fā)。
事件總線（Event Bus）
事件總線是一種在 Vue 組件之間通信的方式，適用于兄弟組件之間的通信。它通過(guò)一個(gè)共享的事件中心來(lái)觸發(fā)和監(jiān)聽事件。
事件總線的定義
在 event-bus.js 文件中，通常會(huì)這樣定義事件總線：
import Vue from 'vue'; export const EventBus = new Vue();
這里創(chuàng)建了一個(gè)新的 Vue 實(shí)例作為事件總線。
使用場(chǎng)景
假設(shè)有一個(gè)兄弟組件，它通過(guò)事件總線發(fā)送數(shù)據(jù)：
// 兄弟組件
import { EventBus } from './event-bus.js';
export default {
methods: {
sendData() {
const dataToSend = 'Hello from brother component';
EventBus.$emit('data-to-brother', dataToSend);
}
}
};
當(dāng) sendData 方法被調(diào)用時(shí)，它通過(guò)事件總線觸發(fā) 'data-to-brother' 事件，并傳遞數(shù)據(jù)。
總結(jié)
這段代碼展示了如何使用 Vue 的事件總線在兄弟組件之間通信。通過(guò)監(jiān)聽和觸發(fā)事件，組件可以共享數(shù)據(jù)，而不需要直接的父子關(guān)系。
四. 跨級(jí)組件傳值（Provide/Inject）
1.規(guī)范：祖先組件可以使用provide選項(xiàng)提供數(shù)據(jù)，而子孫組件可以使用inject選項(xiàng)注入這些數(shù)據(jù)。
2.代碼演示：
（1）祖先組件：
<template>
<div>
<descendant-component />
</div>
</template>
<script>
import DescendantComponent from './DescendantComponent.vue';
???????export default {
components: {
DescendantComponent
},
provide() {
return {
crossLevelData: '這是跨級(jí)傳遞的數(shù)據(jù)'
};
}
};
</script>（2）子孫組件：
<template>
<div>
{{ crossLevelData }}
</div>
</template>
<script>
export default {
inject: ['crossLevelData']
};
</script>
解說(shuō)：祖先組件通過(guò)provide提供數(shù)據(jù)，子孫組件通過(guò)inject注入這些數(shù)據(jù)。這種方法適用于跨越多個(gè)層級(jí)的組件通信。
這些是在Vue CLI項(xiàng)目中常用的組件間屬性傳值的方法和規(guī)范。每種方法都有其適用場(chǎng)景，開發(fā)者可以根據(jù)具體需求選擇最合適的傳值方式。
以上就是vue組件間屬性傳值的常用的方法和規(guī)范詳解的詳細(xì)內(nèi)容，更多關(guān)于vue組件屬性傳值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
前端vue3打印功能實(shí)現(xiàn)(多頁(yè)打印、不使用插件)
在Vue項(xiàng)目中實(shí)現(xiàn)打印功能是前端開發(fā)中常見(jiàn)需求之一,這篇文章主要介紹了前端vue3打印功能實(shí)現(xiàn)的全部過(guò)程,文中介紹的方法實(shí)現(xiàn)了多頁(yè)打印并且不使用插件,需要的朋友可以參考下2024-09-09
這篇文章主要介紹是八種vue實(shí)現(xiàn)組建通信的方式，包括、props 父組件與子組件通信、$emit 子組件父組件傳遞、$emit與props結(jié)合 兄弟組件傳值等等，想具體了解的朋友可以參考下面文章的具體內(nèi)容2021-09-09
vite項(xiàng)目添加eslint?prettier及husky方法實(shí)例
這篇文章主要為大家介紹了vite項(xiàng)目添加eslint?prettier及實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
關(guān)于Vue 消除Token過(guò)期時(shí)刷新頁(yè)面的重復(fù)提示問(wèn)題
很多朋友在token過(guò)期時(shí)刷新頁(yè)面，頁(yè)面長(zhǎng)時(shí)間未操作，再刷新頁(yè)面時(shí)，第一次彈出“token失效,請(qǐng)重新登錄!”提示，針對(duì)這個(gè)問(wèn)題該怎么處理呢，下面小編給大家?guī)?lái)原因分析及解決方法，一起看看吧2021-07-07
這篇文章主要介紹了基于vue如何發(fā)布一個(gè)npm包的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單的npm包,本文詳細(xì)闡述了從創(chuàng)建到發(fā)布的整個(gè)過(guò)程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
vue resource發(fā)送請(qǐng)求的幾種方式
這篇文章主要介紹了vue resource發(fā)送請(qǐng)求的幾種方式，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue3中路由傳參query、params及動(dòng)態(tài)路由傳參詳解
vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關(guān)于vue3中路由傳參query、params及動(dòng)態(tài)路由傳參的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue代理如何配置重寫方法(pathRewrite與rewrite)
這篇文章主要介紹了vue代理如何配置重寫方法(pathRewrite與rewrite),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中el-select中多選回顯數(shù)據(jù)后沒(méi)法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒(méi)法重新選擇和更改解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01