vue3 双向绑定：如何在自定义组件中修改props定义的属性值，并更新父组件绑定的响应式变量值

本文主要是介绍vue3 双向绑定：如何在自定义组件中修改props定义的属性值，并更新父组件绑定的响应式变量值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、自定义支持双向绑定的prop

在子组件中声明一个 count prop，通过触发 update:count 事件更新父组件值

子组件示例代码：

<template><div><div>[子组件] count: {{ count }}</div><button @click="onClick">+1</button></div>
</template><script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({name: 'child-component',props: {count: {type: Number,default: 0}},emits: ['update:count'],setup(props, ctx) {const onClick = () => {ctx.emit('update:count', props.count + 1);}return {onClick};}
});
</script>

 父组件示例代码：

<template><div><div>[父组件] count: {{ count }}</div><child-component :count="count" @update:count="count = $event"></child-component></div>
</template><script lang="ts">
import ChildComponent from '@/components/child-component/child-component.vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({components: { ChildComponent },setup() {return {count: ref<number>(0)};}
});
</script>

简化写法（语法糖），使用 v-model 双向数据绑定的指令

<child-component v-model:count="count"></child-component>

2、子组件 prop 为  modelValue  

在子组件中声明一个  modelValue  prop，通过触发  update:modelValue  事件更新父组件值，父组件使用  v-model 、 v-model:modelValue 、 v-model:model-value  的写法都是支持的。

子组件示例代码：

<script setup lang="ts">defineProps(['modelValue'])
</script><template><el-input :modelValue="modelValue" @input="$emit('update:modelValue', $event)"/>
</template>

 父组件示例代码：

<script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from './components/ChildComponent.vue'const parentValue = ref('')
</script><template><ChildComponent v-model="parentValue" />
</template>

 其他支持写法：

<ChildComponent v-model:modelValue="parentValue" />
<ChildComponent v-model:model-value="parentValue" />
<ChildComponent :modelValue="parentValue" @update:modelValue="parentValue = $event" />
<ChildComponent :model-value="parentValue" @update:model-value="parentValue = $event" />

3、子组件中也存在组件 v-model 的值需与 prop 的值同步

定义一个可写的 computed 响应式变量，get直接返回传入子组件的 prop，set变更 prop 的值

<script setup lang="ts">import { computed } from 'vue'const props = defineProps(['modelValue'])const emits = defineEmits(['update:modelValue'])const childValue = computed({get: () => props.modelValue,set: (val) => emits('update:modelValue', val)})
</script><template><el-input v-model="childValue"/>
</template>

4、vue3.4+ 推荐使用 defineModel

写法更加简单，关于默认值、必填等选项配置可查阅文档

 官方文档：https://cn.vuejs.org/api/sfc-script-setup.html#definemodel

子组件示例代码：

<script setup lang="ts">const modelValue = defineModel()
</script><template><el-input v-model="modelValue" />
</template>

这篇关于vue3 双向绑定：如何在自定义组件中修改props定义的属性值，并更新父组件绑定的响应式变量值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---