1、自定义支持双向绑定的prop
在子组件中声明一个 count prop,通过触发 update:count 事件更新父组件值
子组件示例代码:
html
<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>
父组件示例代码:
html
<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 双向数据绑定的指令
html
<child-component v-model:count="count"></child-component>
2、子组件 prop 为 modelValue
在子组件中声明一个 modelValueprop,通过触发 update:modelValue 事件更新父组件值,父组件使用 v-model 、 v-model:modelValue 、 v-model:model-value 的写法都是支持的。
子组件示例代码:
TypeScript
<script setup lang="ts">
defineProps(['modelValue'])
</script>
<template>
<el-input :modelValue="modelValue" @input="$emit('update:modelValue', $event)"/>
</template>
父组件示例代码:
TypeScript
<script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from './components/ChildComponent.vue'
const parentValue = ref('')
</script>
<template>
<ChildComponent v-model="parentValue" />
</template>
其他支持写法:
TypeScript
<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 的值
TypeScript
<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
子组件示例代码:
TypeScript
<script setup lang="ts">
const modelValue = defineModel()
</script>
<template>
<el-input v-model="modelValue" />
</template>