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

本文主要是介绍vue3子组件修改父组件传来的值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概述

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

效果图

修改前

修改后

示例代码

1. 父组件Parent.vue

<template><Childv-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>

这篇关于vue3子组件修改父组件传来的值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---