快捷導(dǎo)航

vue3父子組件通信之子組件修改父組件傳過(guò)來(lái)的值

更新時(shí)間：2024年05月28日 10:51:06 作者：我愛加班

這篇文章主要介紹了vue3父子組件通信之子組件修改父組件傳過(guò)來(lái)的值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

一、第一種，通過(guò)props方式傳值：

父組件：

父組件調(diào)用子組件Child1時(shí)通過(guò) :msg2= "msg2"把msg2的數(shù)據(jù)傳給子組件，并且通過(guò)自定義事件接收子組件的emit通知，用來(lái)修改父組件的msg2數(shù)據(jù)。

源碼：

<template>
  <div>
    我是home組件 父組件
    <h1>{{ msg }}</h1>
    <div>父組件--props方式傳值：{{ msg2 }}</div>
    <Child1 :msg2="msg2" @event="eventFn" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child1 from './child1.vue'
const props = defineProps(['msg'])
const msg2 = ref('今天是星期三，多云。')
const eventFn = (val) => {
    msg2.value = val
}
</script>

子組件：

子組件通過(guò)defineProps接收一下msg2 ，可以直接展示在模板上，子組件自定義emit事件去通知父組件修改msg2的數(shù)據(jù)，數(shù)值是子組件傳過(guò)去的。

源碼:

<template>
  <div>
    <h3>大家好，我是子組件1</h3>
    <button @click="handleClick">修改父組件數(shù)據(jù)msg2</button>
    <div>子組件——props方式傳過(guò)來(lái)：{{ msg2 }}</div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const props = defineProps(['msg2'])
const emit = defineEmits(['event'])
const handleClick = () => {
    emit('event', '希望早日出太陽(yáng)，暴富而不是暴曬！')
}
</script>

點(diǎn)擊前：

點(diǎn)擊后：

二、第二種，通過(guò)v-model+冒號(hào)+要傳的值的方式（這個(gè)v-model可以寫多個(gè)）：

父組件：

父組件調(diào)用子組件時(shí)，通過(guò)v-model:num="num" 的方式傳值給子組件。

源碼：

<template>
  <div>
    我是home組件 父組件
    <h1>{{ msg }}</h1>
    <div>父組件--props方式傳值：{{ msg2 }}</div>
    <div>父組件num——v-model方式傳值：{{ num }}</div>
    <Child1
     :msg2="msg2" @event="eventFn"
     v-model:num="num"
     />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Child1 from './child1.vue'
const props = defineProps(['msg'])
const msg2 = ref('今天是星期三，多云。')
const num = ref(0)
const eventFn = (val) => {
    msg2.value = val
}
</script>

子組件：

子組件也先通過(guò)defineProps接收一下num，并展示。然后通過(guò)自定義emit事件

const emit = defineEmit(['update: num'])

然后通過(guò)點(diǎn)擊事件updateNum方法來(lái)觸發(fā)通知父組件修改num數(shù)據(jù)。

源碼：

<template>
  <div>
    <h3>大家好，我是子組件1</h3>
    <button @click="handleClick">修改父組件數(shù)據(jù)msg2</button>
    <div>子組件——props方式傳過(guò)來(lái)：{{ msg2 }}</div>
    <button @click="updateNum">修改父組件num</button>
    <div>子組件num——v-model方式傳過(guò)來(lái)：{{ num }}</div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const props = defineProps(['msg2','num'])
const emit = defineEmits(['event', 'update:num'])
const handleClick = () => {
    emit('event', '希望早日出太陽(yáng)，暴富而不是暴曬！')
}
const updateNum = () => {
    emit('update:num', 222)
}
</script>

點(diǎn)擊前：