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

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

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

Props

這是最常用的一種方式。通過props選項，在父組件中傳遞數(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ā)一個自定義事件，并通過參數(shù)傳遞數(shù)據(jù)。在父組件中監(jiān)聽這個事件，就可以訪問到子組件傳遞過來的數(shù)據(jù)了。

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

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

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

接下來，在父組件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選項中，我們定義了handleCustomEvent方法，并接收子組件傳遞過來的數(shù)據(jù)。當(dāng)子組件調(diào)用this.$emit(‘customEvent’, data)時，該方法會被觸發(fā)，在控制臺輸出子組件傳遞過來的數(shù)據(jù)。