Vue組件傳參的八種方式詳解
在Vue中，組件之間的傳參是構(gòu)建動態(tài)和交互性用戶界面的關(guān)鍵。Vue提供了多種方式來傳遞參數(shù)，以下是對這些方式的詳細說明：
一、Props
Props是Vue中組件之間傳遞數(shù)據(jù)的一種常見方式。父組件可以通過props將數(shù)據(jù)傳遞給子組件，子組件通過props選項來接收這些數(shù)據(jù)。
使用方式：
父組件中定義要傳遞的數(shù)據(jù)，并在使用子組件時以屬性的形式傳遞。
子組件中通過props選項來聲明要接收的數(shù)據(jù)。
示例：
<!-- 父組件 -->
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '這是來自父組件的消息'
};
}
};
</script>
<!-- 子組件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
};
</script>
二、$emit
emit是Vue中組件之間通過事件進行數(shù)據(jù)傳遞的一種方式。子組件可以通過emit方法觸發(fā)一個自定義事件，并將數(shù)據(jù)傳遞給父組件。父組件可以通過在子組件標(biāo)簽上監(jiān)聽這個自定義事件來接收數(shù)據(jù)。
使用方式：
子組件中定義要觸發(fā)的事件，并通過$emit方法傳遞數(shù)據(jù)。
父組件中在子組件標(biāo)簽上監(jiān)聽該事件，并定義處理函數(shù)來接收數(shù)據(jù)。
示例：
<!-- 子組件 -->
<template>
<button @click="sendMessage">發(fā)送消息給父組件</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('childMessage', '這是來自子組件的消息');
}
}
};
</script>
<!-- 父組件 -->
<template>
<div>
<child-component @childMessage="handleChildMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleChildMessage(message) {
console.log(message);
}
}
};
</script>
三、Provide/Inject
Provide/Inject是Vue中組件之間通過依賴注入進行數(shù)據(jù)傳遞的一種方式。父組件可以通過provide選項提供數(shù)據(jù)，子組件（包括跨層級的子孫組件）可以通過inject選項注入這些數(shù)據(jù)。
使用方式：
父組件中通過provide選項提供數(shù)據(jù)。
子組件中通過inject選項注入所需的數(shù)據(jù)。
示例：
<!-- 父組件 -->
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
message: '這是通過provide/inject傳遞的消息'
};
}
};
</script>
<!-- 子組件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message']
};
</script>
四、attrs和listeners
$attrs：
- 概述：
$attrs是一個對象，它包含了父作用域中沒有被prop接收的所有屬性（不包含class和style屬性）?？梢酝ㄟ^v-bind="$attrs"直接將這些屬性傳入內(nèi)部組件，實現(xiàn)父組件隔代向?qū)O組件傳值。 - 舉例：父組件將
name和age屬性傳遞給子組件，子組件通過v-bind="$attrs"將這些屬性（以及可能的其他未聲明的屬性）傳遞給孫組件。孫組件通過props接收這些屬性。
<!-- 父組件（Parent.vue） -->
<template>
<div>
<h1>父組件</h1>
<ChildComponent :name="parentName" :age="parentAge" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
parentName: 'Tom',
parentAge: 30
};
}
};
</script>
<!-- 子組件（ChildComponent.vue） -->
<template>
<div>
<h2>子組件</h2>
<GrandChildComponent v-bind="$attrs" />
</div>
</template>
<script>
import GrandChildComponent from './GrandChildComponent.vue';
export default {
components: { GrandChildComponent }
};
</script>
<!-- 孫組件（GrandChildComponent.vue） -->
<template>
<div>
<h3>孫組件</h3>
<p>父組件傳遞的名字：{{ name }}</p>
<p>父組件傳遞的年齡：{{ age }}</p>
</div>
</template>
<script>
export default {
props: ['name', 'age']
};
</script>
$listeners：
概述：
$listeners是一個對象，它包含了父組件中所有的v-on事件監(jiān)聽器（不包含.native修飾器的）。可以通過v-on="$listeners"將這些事件監(jiān)聽器傳入內(nèi)部組件，實現(xiàn)孫組件隔代向父組件傳值。舉例：
在上述例子中，如果孫組件需要向父組件發(fā)送事件，可以通過
$emit觸發(fā)事件，并在子組件中使用v-on="$listeners"將這些事件傳遞給父組件。然而，需要注意的是，$listeners通常用于孫組件向隔代的父組件發(fā)送事件，而不是直接用于父子組件間的通信。在實際應(yīng)用中，父子組件間的通信更多地使用$emit和v-on。
五、parent和children
parent和children是Vue中組件之間通過訪問父組件和子組件實例進行數(shù)據(jù)傳遞的一種方式。子組件可以通過parent屬性訪問父組件實例，父組件可以通過children屬性訪問子組件實例（注意：$children是一個數(shù)組，包含了所有子組件的實例，但不保證順序）。
使用方式：
通過parent或children訪問相應(yīng)的組件實例。
直接在組件實例上 訪問或修改數(shù)據(jù)。
舉例
注意：通常不建議直接使用$children進行組件間的通信，因為它可能導(dǎo)致代碼難以維護和理解。如果需要訪問子組件的數(shù)據(jù)或方法，更推薦使用ref或provide/inject等機制。
<!-- 父組件（Parent.vue） -->
<template>
<div>
<h1>父組件</h1>
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from Parent'
};
},
methods: {
parentMethod() {
console.log('Parent method called');
}
}
};
</script>
<!-- 子組件（ChildComponent.vue） -->
<template>
<div>
<h2>子組件</h2>
<button @click="callParentMethod">調(diào)用父組件方法</button>
</div>
</template>
<script>
export default {
methods: {
callParentMethod() {
this.$parent.parentMethod();
}
}
};
</script>
六、Vuex
Vuex是Vue中一種專門用于狀態(tài)管理的插件。通過在Vuex中定義全局的狀態(tài)，并在組件中使用getter和mutation來訪問和修改狀態(tài)，可以實現(xiàn)組件之間的數(shù)據(jù)傳遞和共享。
使用方式：
安裝Vuex并創(chuàng)建store。
在store中定義狀態(tài)、mutation、action等。
在組件中通過this.$store訪問store，并使用getter獲取狀態(tài)，使用mutation或action修改狀態(tài)。
舉例
<!-- 父組件（Parent.vue） -->
<template>
<div>
<h1>父組件</h1>
<ChildComponent />
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
computed: {
...mapState(['counter'])
},
methods: {
...mapMutations(['increment'])
}
};
</script>
<!-- 子組件（ChildComponent.vue） -->
<template>
<div>
<h2>子組件</h2>
<p>計數(shù)器：{{ counter }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['counter'])
},
methods: {
...mapMutations(['increment'])
}
};
</script>
<!-- Vuex Store（store.js） -->
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment(state) {
state.counter++;
}
}
});
七、插槽（Slot）
插槽是一種讓父組件能夠向子組件指定內(nèi)容插入點的機制。通過插槽，父組件可以將自己的模板內(nèi)容傳遞給子組件，并在子組件的指定位置渲染出來。
插槽分為默認插槽、具名插槽和作用域插槽三種類型。
使用方式：
在子組件中定義插槽。
在父組件中使用子組件時，通過插槽向子組件傳遞內(nèi)容。
舉例
默認插槽
默認插槽是最基本的插槽類型，用于在組件內(nèi)傳遞和顯示任意內(nèi)容。如果沒有給插槽命名，Vue會將內(nèi)容傳遞到默認插槽中。
//子組件
<template>
<div class="my-component">
<slot></slot> <!-- 默認插槽 -->
</div>
</template>
//父組件
<template>
<MyComponent>
<p>This is some default slot content!</p>
</MyComponent>
</template>
具名插槽
具名插槽允許我們在組件中定義多個插槽，每個插槽都有一個唯一的名稱。這樣可以在組件中更精確地控制內(nèi)容的顯示位置。
//子組件（MyComponent.vue）
<template>
<div class="my-component">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> <!-- 默認插槽 -->
</main>
<footer>
<slot name="footer"></slot><!--具名插槽-->
</footer>
</div>
</template>
//父組件
<template>
<MyComponent>
<template v-slot:header>
<h1>Header Content</h1>
</template>
<p>This is some default slot content!</p>
<template v-slot:footer>
<p>Footer Content</p>
</template>
</MyComponent>
</template>
在這個例子中，<h1>Header Content</h1>將會顯示在<slot name="header"></slot>位置，<p>Footer Content</p>將會顯示在<slot name="footer"></slot>位置，而默認插槽中的內(nèi)容仍會顯示在<slot></slot>位置。
作用域插槽
作用域插槽是一種特殊類型的插槽，允許我們在父組件中訪問子組件的數(shù)據(jù)。這在需要動態(tài)渲染內(nèi)容時特別有用。
//子組件（MyComponent.vue）
<template>
<div class="my-component">
<slot :data="someData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
someData: 'Hello from MyComponent!'
};
}
};
</script>
//父組件
<template>
<MyComponent v-slot:default="slotProps">
<p>{{ slotProps.data }}</p>
</MyComponent>
</template>
在這個例子中，slotProps.data將會是'Hello from MyComponent!'，并且會顯示在父組件的<p>標(biāo)簽內(nèi)。
八、事件總線（Event Bus）
事件總線的概念
事件總線是一個設(shè)計模式，它充當(dāng)一個中間人，負責(zé)監(jiān)聽各個組件發(fā)布的事件，并分發(fā)給訂閱這些事件的其他組件。在Vue中，事件總線通常是一個新的Vue實例，它提供了$emit、$on和$off方法，分別用于觸發(fā)事件、監(jiān)聽事件和移除事件監(jiān)聽。
- $emit：用于觸發(fā)事件，并傳遞相關(guān)數(shù)據(jù)。
- $on：用于監(jiān)聽事件，并定義事件觸發(fā)時的回調(diào)函數(shù)。
- $off：用于移除事件監(jiān)聽，防止內(nèi)存泄漏。
使用方式：
創(chuàng)建一個空的Vue實例作為事件總線。
組件通過事件總線監(jiān)聽和觸發(fā)事件來傳遞數(shù)據(jù)。
事件總線的實現(xiàn)步驟
創(chuàng)建事件總線：
- 你可以在一個單獨的
.js文件中創(chuàng)建一個新的Vue實例，并將其導(dǎo)出為事件總線。 - 或者，你也可以在Vue項目的入口文件（如
main.js）中，將事件總線掛載到Vue的原型上，使其成為全局可用的。
在組件中引入事件總線：
- 使用
import語句將事件總線引入到你需要使用它的組件中。
觸發(fā)和監(jiān)聽事件：
- 使用
$emit方法在組件中觸發(fā)事件，并傳遞相關(guān)數(shù)據(jù)。 - 使用
$on方法在另一個組件中監(jiān)聽這個事件，并定義回調(diào)函數(shù)來處理接收到的數(shù)據(jù)。
移除事件監(jiān)聽：
- 在組件銷毀之前，使用
$off方法移除所有不再需要的事件監(jiān)聽，以防止內(nèi)存泄漏。
事件總線的例子
假設(shè)我們有兩個兄弟組件ComponentA和ComponentB，它們需要通過事件總線進行通信。
1. 創(chuàng)建事件總線（event-bus.js）：
import Vue from 'vue'; export const EventBus = new Vue();
2. 在組件中引入事件總線并使用：
ComponentA.vue
<template>
<button @click="sendMessage">Send Message to ComponentB</button>
</template>
<script>
import { EventBus } from '../event-bus.js';
export default {
methods: {
sendMessage() {
EventBus.$emit('message-from-a', 'Hello from Component A!');
}
}
};
</script>
ComponentB.vue：
<template>
<div>
<p>Message from ComponentA: {{ message }}</p>
</div>
</template>
<script>
import { EventBus } from '../event-bus.js';
export default {
data() {
return {
message: ''
};
},
created() {
EventBus.$on('message-from-a', (msg) => {
this.message = msg;
});
},
beforeDestroy() {
EventBus.$off('message-from-a');
}
};
</script>
在這個例子中，當(dāng)ComponentA中的按鈕被點擊時，它會通過事件總線觸發(fā)一個名為message-from-a的事件，并傳遞一條消息。然后，ComponentB會監(jiān)聽這個事件，并在接收到消息時更新其數(shù)據(jù)。最后，在ComponentB銷毀之前，它會移除對message-from-a事件的監(jiān)聽，以防止內(nèi)存泄漏。
事件總線的優(yōu)缺點
優(yōu)點：
- 靈活性：事件總線允許組件之間進行靈活的通信，不受組件層級結(jié)構(gòu)的限制。
- 解耦性：通過事件總線進行通信的組件之間不需要直接引用或依賴彼此，降低了組件之間的耦合度。
缺點：
- 調(diào)試困難：隨著應(yīng)用程序規(guī)模的增大，事件總線中的事件和監(jiān)聽器可能會變得非常復(fù)雜和難以管理。
- 內(nèi)存泄漏風(fēng)險：如果忘記在組件銷毀前移除事件監(jiān)聽器，可能會導(dǎo)致內(nèi)存泄漏。
因此，在使用事件總線時，建議制定明確的事件命名規(guī)范，并在組件銷毀前及時移除不再需要的事件監(jiān)聽器。此外，對于大型或復(fù)雜的應(yīng)用程序，可以考慮使用更高級的狀態(tài)管理解決方案（如本篇第六個 Vuex）來替代事件總線。
以上就是Vue組件傳參的八種方式詳解的詳細內(nèi)容，更多關(guān)于Vue組件傳參方式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于vue 的slot分發(fā)內(nèi)容 (多個分發(fā))
這篇文章主要介紹了關(guān)于vue 的slot分發(fā)內(nèi)容 (多個分發(fā))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了對vue中的input輸入框進行郵箱驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3項目require引入css文件報錯:require is not defined
Vue3項目中使用require引入CSS文件報錯,建議使用import替代,對于動態(tài)引入,確保路徑正確,Vite官網(wǎng)推薦使用new URL(url, import.meta.url)來處理靜態(tài)資源,該方法可在現(xiàn)代瀏覽器中原生使用,在生產(chǎn)構(gòu)建時,Vite會進行必要的轉(zhuǎn)換以保證URL的正確性2025-12-12
這篇文章主要介紹了vue的傳參方式和router使用技巧,本文給大家列舉了好幾種傳參方式，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了uniapp頁面完成水印添加功能(自定義文字)的相關(guān)資料,包括如何編寫頁面代碼、數(shù)據(jù)代碼以及如何展示效果圖,通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細 ,需要的朋友可以參考下2019-04-04
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
最近小編遇到這樣的需求，要實現(xiàn)一個新聞?wù)故卷摴δ埽瑒偨拥竭@樣的需求還真是一頭霧水，不知從哪入手，今天小編通過實例代碼給大家介紹下vue實現(xiàn)新聞?wù)故卷摰牟襟E詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
最近用 Vue 做移動端頁面遇到一個問題,需要記住滾動條的位置,所以下面這篇文章主要給大家介紹了關(guān)于vue中記錄滾動條位置的兩種方法,文中給出了詳細的實例,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了簡易vuex4核心原理及實現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01