快捷導(dǎo)航

vue父子組件之間的傳參的幾種方式小結(jié)

更新時(shí)間：2023年04月28日 09:54:30 作者：唯愛贊多

本文主要介紹了vue父子組件之間的傳參的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Props

這是最常用的一種方式。通過props選項(xiàng)，在父組件中傳遞數(shù)據(jù)給子組件。在子組件中使用props聲明該屬性，就可以訪問到父組件傳遞過來的數(shù)據(jù)了。

在父組件中：

<template>
? <ChildComponent :message="hello"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
? components: {
? ? ChildComponent
? },
? data() {
? ? return {
? ? ? hello: 'Hello, Vue!'
? ? }
? }
}
</script>

在子組件中：

<template>
? <div>{{ message }}</div>
</template>
<script>
export default {
? props: ['message']
}
</script>

emit

子組件向父組件傳遞數(shù)據(jù)的方式。在子組件中使用emit方法觸發(fā)一個(gè)自定義事件，并通過參數(shù)傳遞數(shù)據(jù)。在父組件中監(jiān)聽這個(gè)事件，就可以訪問到子組件傳遞過來的數(shù)據(jù)了。

首先，在子組件ChildComponent中定義一個(gè)customEvent事件：

<template>
? <button @click="handleClick">傳遞數(shù)據(jù)</button>
</template>
<script>
export default {
? methods: {
? ? handleClick() {
? ? ? const data = "Hello, World!"
? ? ? this.$emit('customEvent', data);
? ? }
? }
}
</script>

上面代碼中，我們定義了一個(gè)點(diǎn)擊事件handleClick，當(dāng)用戶點(diǎn)擊按鈕時(shí)，會(huì)觸發(fā)這個(gè)事件。在事件處理函數(shù)中，我們定義了一個(gè)字符串變量data，并通過this.$emit(‘customEvent’, data)方式把這個(gè)變量傳遞給父組件。

接下來，在父組件ParentComponent中通過v-on:或者簡寫成@來監(jiān)聽子組件發(fā)出的自定義事件：

<template>
? <div>
? ? <child-component @customEvent="handleCustomEvent"></child-component>
? </div>
</template>
<script>
import ChildComponent from '@/components/ChildComponent.vue'
export default {
? components: {
? ? ChildComponent
? },
? methods: {
? ? handleCustomEvent(data) {
? ? ? console.log(data)
? ? }
? }
}
</script>

上面代碼中，我們使用@customEvent="handleCustomEvent"語法來監(jiān)聽子組件發(fā)出的自定義事件。在父組件的methods選項(xiàng)中，我們定義了handleCustomEvent方法，并接收子組件傳遞過來的數(shù)據(jù)。當(dāng)子組件調(diào)用this.$emit(‘customEvent’, data)時(shí)，該方法會(huì)被觸發(fā)，在控制臺(tái)輸出子組件傳遞過來的數(shù)據(jù)。