Vue組件傳參的八種方式詳解

更新時(shí)間：2025年05月30日 09:03:08 作者：咔咔庫(kù)奇

在Vue中,組件之間的傳參是構(gòu)建動(dòng)態(tài)和交互性用戶界面的關(guān)鍵,Vue提供了多種方式來(lái)傳遞參數(shù),本文對(duì)這些方式進(jìn)行了詳細(xì)說(shuō)明,并有相關(guān)的代碼供大家參考,需要的朋友可以參考下

在Vue中，組件之間的傳參是構(gòu)建動(dòng)態(tài)和交互性用戶界面的關(guān)鍵。Vue提供了多種方式來(lái)傳遞參數(shù)，以下是對(duì)這些方式的詳細(xì)說(shuō)明：

一、Props

Props是Vue中組件之間傳遞數(shù)據(jù)的一種常見(jiàn)方式。父組件可以通過(guò)props將數(shù)據(jù)傳遞給子組件，子組件通過(guò)props選項(xiàng)來(lái)接收這些數(shù)據(jù)。

使用方式：

父組件中定義要傳遞的數(shù)據(jù)，并在使用子組件時(shí)以屬性的形式傳遞。

子組件中通過(guò)props選項(xiàng)來(lái)聲明要接收的數(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: '這是來(lái)自父組件的消息'
    };
  }
};
</script>

<!-- 子組件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

二、$emit

emit是Vue中組件之間通過(guò)事件進(jìn)行數(shù)據(jù)傳遞的一種方式。子組件可以通過(guò)emit方法觸發(fā)一個(gè)自定義事件，并將數(shù)據(jù)傳遞給父組件。父組件可以通過(guò)在子組件標(biāo)簽上監(jiān)聽(tīng)這個(gè)自定義事件來(lái)接收數(shù)據(jù)。

使用方式：

子組件中定義要觸發(fā)的事件，并通過(guò)$emit方法傳遞數(shù)據(jù)。

父組件中在子組件標(biāo)簽上監(jiān)聽(tīng)該事件，并定義處理函數(shù)來(lái)接收數(shù)據(jù)。
示例：

<!-- 子組件 -->
<template>
  <button @click="sendMessage">發(fā)送消息給父組件</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childMessage', '這是來(lái)自子組件的消息');
    }
  }
};
</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中組件之間通過(guò)依賴注入進(jìn)行數(shù)據(jù)傳遞的一種方式。父組件可以通過(guò)provide選項(xiàng)提供數(shù)據(jù)，子組件（包括跨層級(jí)的子孫組件）可以通過(guò)inject選項(xiàng)注入這些數(shù)據(jù)。

使用方式：

父組件中通過(guò)provide選項(xiàng)提供數(shù)據(jù)。

子組件中通過(guò)inject選項(xiàng)注入所需的數(shù)據(jù)。
示例：

<!-- 父組件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: '這是通過(guò)provide/inject傳遞的消息'
    };
  }
};
</script>

<!-- 子組件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

四、attrs和listeners

$attrs：

概述：$attrs是一個(gè)對(duì)象，它包含了父作用域中沒(méi)有被prop接收的所有屬性（不包含class和style屬性）?？梢酝ㄟ^(guò)v-bind="$attrs"直接將這些屬性傳入內(nèi)部組件，實(shí)現(xiàn)父組件隔代向?qū)O組件傳值。
舉例：父組件將name和age屬性傳遞給子組件，子組件通過(guò)v-bind="$attrs"將這些屬性（以及可能的其他未聲明的屬性）傳遞給孫組件。孫組件通過(guò)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是一個(gè)對(duì)象，它包含了父組件中所有的v-on事件監(jiān)聽(tīng)器（不包含.native修飾器的）?？梢酝ㄟ^(guò)v-on="$listeners"將這些事件監(jiān)聽(tīng)器傳入內(nèi)部組件，實(shí)現(xiàn)孫組件隔代向父組件傳值。
舉例：

在上述例子中，如果孫組件需要向父組件發(fā)送事件，可以通過(guò)$emit觸發(fā)事件，并在子組件中使用v-on="$listeners"將這些事件傳遞給父組件。然而，需要注意的是，$listeners通常用于孫組件向隔代的父組件發(fā)送事件，而不是直接用于父子組件間的通信。在實(shí)際應(yīng)用中，父子組件間的通信更多地使用$emit和v-on。

五、parent和children

parent和children是Vue中組件之間通過(guò)訪問(wèn)父組件和子組件實(shí)例進(jìn)行數(shù)據(jù)傳遞的一種方式。子組件可以通過(guò)parent屬性訪問(wèn)父組件實(shí)例，父組件可以通過(guò)children屬性訪問(wèn)子組件實(shí)例（注意：$children是一個(gè)數(shù)組，包含了所有子組件的實(shí)例，但不保證順序）。

使用方式：

通過(guò)parent或children訪問(wèn)相應(yīng)的組件實(shí)例。

直接在組件實(shí)例上訪問(wèn)或修改數(shù)據(jù)。
舉例

注意：通常不建議直接使用$children進(jìn)行組件間的通信，因?yàn)樗赡軐?dǎo)致代碼難以維護(hù)和理解。如果需要訪問(wèn)子組件的數(shù)據(jù)或方法，更推薦使用ref或provide/inject等機(jī)制。

<!-- 父組件（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)管理的插件。通過(guò)在Vuex中定義全局的狀態(tài)，并在組件中使用getter和mutation來(lái)訪問(wèn)和修改狀態(tài)，可以實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞和共享。

使用方式：

安裝Vuex并創(chuàng)建store。

在store中定義狀態(tài)、mutation、action等。

在組件中通過(guò)this.$store訪問(wèn)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>計(jì)數(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)容插入點(diǎn)的機(jī)制。通過(guò)插槽，父組件可以將自己的模板內(nèi)容傳遞給子組件，并在子組件的指定位置渲染出來(lái)。

插槽分為默認(rèn)插槽、具名插槽和作用域插槽三種類型。

使用方式：

在子組件中定義插槽。

在父組件中使用子組件時(shí)，通過(guò)插槽向子組件傳遞內(nèi)容。
舉例

默認(rèn)插槽

默認(rèn)插槽是最基本的插槽類型，用于在組件內(nèi)傳遞和顯示任意內(nèi)容。如果沒(méi)有給插槽命名，Vue會(huì)將內(nèi)容傳遞到默認(rèn)插槽中。

//子組件
<template>
  <div class="my-component">
    <slot></slot> <!-- 默認(rèn)插槽 -->
  </div>
</template>
//父組件
<template>
  <MyComponent>
    <p>This is some default slot content!</p>
  </MyComponent>
</template>

具名插槽

具名插槽允許我們?cè)诮M件中定義多個(gè)插槽，每個(gè)插槽都有一個(gè)唯一的名稱。這樣可以在組件中更精確地控制內(nèi)容的顯示位置。

//子組件（MyComponent.vue）
<template>
  <div class="my-component">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默認(rèn)插槽 -->
    </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>

在這個(gè)例子中，<h1>Header Content</h1>將會(huì)顯示在<slot name="header"></slot>位置，<p>Footer Content</p>將會(huì)顯示在<slot name="footer"></slot>位置，而默認(rèn)插槽中的內(nèi)容仍會(huì)顯示在<slot></slot>位置。

作用域插槽

作用域插槽是一種特殊類型的插槽，允許我們?cè)诟附M件中訪問(wèn)子組件的數(shù)據(jù)。這在需要?jiǎng)討B(tài)渲染內(nèi)容時(shí)特別有用。

//子組件（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>

在這個(gè)例子中，slotProps.data將會(huì)是'Hello from MyComponent!'，并且會(huì)顯示在父組件的<p>標(biāo)簽內(nèi)。

八、事件總線（Event Bus）

事件總線的概念

事件總線是一個(gè)設(shè)計(jì)模式，它充當(dāng)一個(gè)中間人，負(fù)責(zé)監(jiān)聽(tīng)各個(gè)組件發(fā)布的事件，并分發(fā)給訂閱這些事件的其他組件。在Vue中，事件總線通常是一個(gè)新的Vue實(shí)例，它提供了$emit、$on和$off方法，分別用于觸發(fā)事件、監(jiān)聽(tīng)事件和移除事件監(jiān)聽(tīng)。

$emit：用于觸發(fā)事件，并傳遞相關(guān)數(shù)據(jù)。
$on：用于監(jiān)聽(tīng)事件，并定義事件觸發(fā)時(shí)的回調(diào)函數(shù)。
$off：用于移除事件監(jiān)聽(tīng)，防止內(nèi)存泄漏。

使用方式：

創(chuàng)建一個(gè)空的Vue實(shí)例作為事件總線。

組件通過(guò)事件總線監(jiān)聽(tīng)和觸發(fā)事件來(lái)傳遞數(shù)據(jù)。

事件總線的實(shí)現(xiàn)步驟

創(chuàng)建事件總線：

你可以在一個(gè)單獨(dú)的.js文件中創(chuàng)建一個(gè)新的Vue實(shí)例，并將其導(dǎo)出為事件總線。
或者，你也可以在Vue項(xiàng)目的入口文件（如main.js）中，將事件總線掛載到Vue的原型上，使其成為全局可用的。

在組件中引入事件總線：

使用import語(yǔ)句將事件總線引入到你需要使用它的組件中。

觸發(fā)和監(jiān)聽(tīng)事件：

使用$emit方法在組件中觸發(fā)事件，并傳遞相關(guān)數(shù)據(jù)。
使用$on方法在另一個(gè)組件中監(jiān)聽(tīng)這個(gè)事件，并定義回調(diào)函數(shù)來(lái)處理接收到的數(shù)據(jù)。

移除事件監(jiān)聽(tīng)：

在組件銷毀之前，使用$off方法移除所有不再需要的事件監(jiān)聽(tīng)，以防止內(nèi)存泄漏。

事件總線的例子

假設(shè)我們有兩個(gè)兄弟組件ComponentA和ComponentB，它們需要通過(guò)事件總線進(jìn)行通信。

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>

在這個(gè)例子中，當(dāng)ComponentA中的按鈕被點(diǎn)擊時(shí)，它會(huì)通過(guò)事件總線觸發(fā)一個(gè)名為message-from-a的事件，并傳遞一條消息。然后，ComponentB會(huì)監(jiān)聽(tīng)這個(gè)事件，并在接收到消息時(shí)更新其數(shù)據(jù)。最后，在ComponentB銷毀之前，它會(huì)移除對(duì)message-from-a事件的監(jiān)聽(tīng)，以防止內(nèi)存泄漏。

事件總線的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

靈活性：事件總線允許組件之間進(jìn)行靈活的通信，不受組件層級(jí)結(jié)構(gòu)的限制。
解耦性：通過(guò)事件總線進(jìn)行通信的組件之間不需要直接引用或依賴彼此，降低了組件之間的耦合度。

缺點(diǎn)：

調(diào)試?yán)щy：隨著應(yīng)用程序規(guī)模的增大，事件總線中的事件和監(jiān)聽(tīng)器可能會(huì)變得非常復(fù)雜和難以管理。
內(nèi)存泄漏風(fēng)險(xiǎn)：如果忘記在組件銷毀前移除事件監(jiān)聽(tīng)器，可能會(huì)導(dǎo)致內(nèi)存泄漏。

因此，在使用事件總線時(shí)，建議制定明確的事件命名規(guī)范，并在組件銷毀前及時(shí)移除不再需要的事件監(jiān)聽(tīng)器。此外，對(duì)于大型或復(fù)雜的應(yīng)用程序，可以考慮使用更高級(jí)的狀態(tài)管理解決方案（如本篇第六個(gè) Vuex）來(lái)替代事件總線。

以上就是Vue組件傳參的八種方式詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue組件傳參方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue組件傳參的八種方式詳解

目錄

一、Props

二、$emit

三、Provide/Inject

四、attrs和listeners

$attrs：

$listeners：

五、parent和children

六、Vuex

七、插槽（Slot）

默認(rèn)插槽

具名插槽

作用域插槽

八、事件總線（Event Bus）

事件總線的概念

事件總線的實(shí)現(xiàn)步驟

創(chuàng)建事件總線：

在組件中引入事件總線：

觸發(fā)和監(jiān)聽(tīng)事件：

移除事件監(jiān)聽(tīng)：

事件總線的例子

1. 創(chuàng)建事件總線（event-bus.js）：

2. 在組件中引入事件總線并使用：

事件總線的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

缺點(diǎn)：

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue組件傳參的八種方式詳解

目錄

一、Props

二、$emit

三、Provide/Inject

四、attrs和listeners

$attrs：

$listeners：

五、parent和children

六、Vuex

七、插槽（Slot）

默認(rèn)插槽

具名插槽

作用域插槽

八、事件總線（Event Bus）

事件總線的概念

事件總線的實(shí)現(xiàn)步驟

創(chuàng)建事件總線：

在組件中引入事件總線：

觸發(fā)和監(jiān)聽(tīng)事件：

移除事件監(jiān)聽(tīng)：

事件總線的例子

1. 創(chuàng)建事件總線（event-bus.js）：

2. 在組件中引入事件總線并使用：

事件總線的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

缺點(diǎn)：

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、Props

二、$emit

三、Provide/Inject

四、attrs和listeners

六、Vuex

七、插槽（Slot）