vue3子组件修改父组件传来的值
概述
vue3子组件修改父组件的值
不需要父组件传给子组件函数的形式，而是直接在子组件中通过emit修改父组件传来的值
效果图
修改前
修改后
示例代码
- 父组件
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>
- 子组件
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>