当前位置：首页 > article >正文

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

article 2024/11/15 13:25:31

概述

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>