vue3子组件修改父组件传来的值

概述

vue3子组件修改父组件的值
不需要父组件传给子组件函数的形式，而是直接在子组件中通过emit修改父组件传来的值

效果图

修改前

修改后

示例代码

1. 父组件Parent.vue

<template>
    <Child
      v-model:txt="state.txt"
    />
</template>
<script setup>
import { reactive } from 'vue'
import Child from './Child.vue'

const state = reactive({
  txt: '父组件传给子组件的值'
});
</script>

2. 子组件Child.vue

<template>
  <el-button @click="changeTxt">修改</el-button>
  {{ props.txt }}
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'

const emit = defineEmits(['update:txt'])
const props = defineProps({
  txt: String
})

const changeTxt = () => {
  emit('update:txt', '子组件修改后的值'+parseInt(Math.random()*100))
}

</script>