vue組件間屬性傳值的常用的方法和規(guī)范詳解
一. 父組件向子組件傳值（Props）
1.規(guī)范：父組件通過屬性（props）向子組件傳遞數據。子組件需要在props選項中聲明這些屬性。
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: '這是來自父組件的數據'
};
}
};
</script>
（2） 子組件：
<template>
<div>
{{ parentData }}
</div>
</template>
<script>
export default {
props: {
parentData: String
}
};
</script>
解說：父組件使用v-bind（或簡寫為:）將dataFromParent屬性傳遞給子組件。子組件通過聲明props來接收這個數據，并可以在模板中使用它。
二. 子組件向父組件傳值（Events）
1.規(guī)范：子組件通過發(fā)射事件（$emit）向父組件傳遞數據。父組件通過監(jiān)聽這些事件來接收數據。
2.代碼演示：
（1）子組件：
<template>
<div>
<button @click="sendDataToParent">發(fā)送數據到父組件</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('dataToSend', '這是子組件發(fā)送的數據');
}
}
};
</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ā)送的數據
}
}
};
</script>解說：子組件通過this.$emit觸發(fā)一個事件，并傳遞數據。父組件通過v-on（或簡寫為@）監(jiān)聽這個事件，并在事件處理函數中接收數據。
三. 兄弟組件傳值（Event Bus）
1.規(guī)范：兄弟組件可以通過一個共同的父組件或使用全局事件總線（Event Bus）來傳遞數據。
2.代碼演示：
（1）Event Bus：
// event-bus.js import Vue from 'vue'; export const EventBus = new Vue();
（2）兄弟組件A（發(fā)送數據）：
<template>
<div>
<button @click="sendData">發(fā)送數據到兄弟組件</button>
</div>
</template>
<script>
import { EventBus } from './event-bus.js';
???????export default {
methods: {
sendData() {
EventBus.$emit('data-to-brother', '這是來自兄弟組件A的數據');
}
}
};
</script>（3）兄弟組件B（接收數據）：
<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.代碼講解
這段代碼是一個 Vue.js 組件的示例，它使用了 Vue 的事件總線（Event Bus）來接收來自兄弟組件的數據，并將其顯示在模板中。以下是對代碼的詳細解釋：
代碼結構
模板部分 (<template>):
- 這是一個簡單的 Vue 模板，包含一個 div 元素，用于顯示從兄弟組件接收到的數據。
- {{ dataFromBrother }} 是 Vue 的插值語法，用于動態(tài)綁定數據。
腳本部分 (<script>):
定義了一個 Vue 組件，包含 data、created、methods 和 beforeDestroy 生命周期鉤子。
代碼詳細解釋
1.數據綁定
data() {
return {
dataFromBrother: ''
};
}
data 是 Vue 組件的選項，用于定義組件的響應式數據。
dataFromBrother 是一個字符串，用于存儲從兄弟組件接收到的數據。
2. 事件監(jiān)聽
created() {
EventBus.$on('data-to-brother', this.receiveData);
}
created 是 Vue 的生命周期鉤子，表示組件實例被創(chuàng)建后執(zhí)行的代碼。
EventBus.$on 是事件總線的監(jiān)聽方法，用于監(jiān)聽事件 'data-to-brother'。
當事件 'data-to-brother' 被觸發(fā)時，調用 this.receiveData 方法。
3. 數據接收
methods: {
receiveData(data) {
this.dataFromBrother = data;
}
}
methods 是 Vue 組件的選項，用于定義組件的方法。
receiveData 是一個方法，接收一個參數 data，并將該數據賦值給 dataFromBrother。
4. 事件解綁
beforeDestroy() {
EventBus.$off('data-to-brother', this.receiveData);
}
beforeDestroy 是 Vue 的生命周期鉤子，表示組件銷毀之前執(zhí)行的代碼。
EventBus.$off 是事件總線的解綁方法，用于移除事件 'data-to-brother' 的監(jiān)聽器。
這一步非常重要，避免內存泄漏和不必要的事件觸發(fā)。
事件總線（Event Bus）
事件總線是一種在 Vue 組件之間通信的方式，適用于兄弟組件之間的通信。它通過一個共享的事件中心來觸發(fā)和監(jiān)聽事件。
事件總線的定義
在 event-bus.js 文件中，通常會這樣定義事件總線：
import Vue from 'vue'; export const EventBus = new Vue();
這里創(chuàng)建了一個新的 Vue 實例作為事件總線。
使用場景
假設有一個兄弟組件，它通過事件總線發(fā)送數據：
// 兄弟組件
import { EventBus } from './event-bus.js';
export default {
methods: {
sendData() {
const dataToSend = 'Hello from brother component';
EventBus.$emit('data-to-brother', dataToSend);
}
}
};
當 sendData 方法被調用時，它通過事件總線觸發(fā) 'data-to-brother' 事件，并傳遞數據。
總結
這段代碼展示了如何使用 Vue 的事件總線在兄弟組件之間通信。通過監(jiān)聽和觸發(fā)事件，組件可以共享數據，而不需要直接的父子關系。
四. 跨級組件傳值（Provide/Inject）
1.規(guī)范：祖先組件可以使用provide選項提供數據，而子孫組件可以使用inject選項注入這些數據。
2.代碼演示：
（1）祖先組件：
<template>
<div>
<descendant-component />
</div>
</template>
<script>
import DescendantComponent from './DescendantComponent.vue';
???????export default {
components: {
DescendantComponent
},
provide() {
return {
crossLevelData: '這是跨級傳遞的數據'
};
}
};
</script>（2）子孫組件：
<template>
<div>
{{ crossLevelData }}
</div>
</template>
<script>
export default {
inject: ['crossLevelData']
};
</script>
解說：祖先組件通過provide提供數據，子孫組件通過inject注入這些數據。這種方法適用于跨越多個層級的組件通信。
這些是在Vue CLI項目中常用的組件間屬性傳值的方法和規(guī)范。每種方法都有其適用場景，開發(fā)者可以根據具體需求選擇最合適的傳值方式。
以上就是vue組件間屬性傳值的常用的方法和規(guī)范詳解的詳細內容，更多關于vue組件屬性傳值的資料請關注腳本之家其它相關文章！
相關文章
在Vue開發(fā)中,父組件和子組件之間的數據傳遞是一項常見的任務,本文將介紹如何在Vue中實現父組件控制子組件的值,以便靈活地管理和更新子組件的數據,文中有詳細的代碼講解,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了vue2如何使用el-tag實現自定義菜單導航標簽,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實現各種文件文檔下載及導出示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue.js 提供了一個方法 watch，它用于觀察Vue實例上的數據變動。下面這篇文章主要給大家介紹了關于Vue.js中關于偵聽器（watch）的高級用法的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-05-05
在Vue項目開發(fā)中,數據可視化是一項重要的任務,Echarts是一個由百度開源的數據可視化庫,提供了豐富的圖表類型和強大的交互功能,其中,K線圖常用于展示金融數據的走勢,本文將詳細介紹如何在Vue項目中引入Echarts并繪制K線圖,需要的朋友可以參考下2025-04-04
今天小編就為大家分享一篇淺談vuex的基本用法和mapaction傳值問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章給大家介紹了vue3如何實現頁面跳轉,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中導入excel文件的兩種方式,大概有兩種導入文件的方法：form表單和el-upload，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12