Vue3中如何自定义双向绑定
作者：青颜的天空
这篇文章主要介绍了Vue3中如何自定义双向绑定问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1.父组件绑定变化
vue2中父组件通过v-model绑定，子组件默认接收一个value属性
vue3中需要通过v-model指定一个需要绑定的属性名称
<!-- 通过：后面指定子组件接收的props名称 --> <AddBook v-model:dialogVisible="addFormVisible"></AddBook>
2. 子组件通过props接收
然后在setup函数中，通过watch监听，定义一个中间变量。
1）emits：Vue3新增属性，定义子组件通过emit传递给父组件的事件名称，以及通过事件传递的参数
2）Vue3需要通过update方法可以实现双向绑定
<template>
<el-dialog class="add-book-dialog" :title="target && target._id ? '编辑账本': '添加账本'"
:close-on-click-modal="false"
v-model="dialogVisibleData">
<el-form :model="targetForm" :rules="rules" ref="bookForm">
...
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts">
import { reactive, ref, watch, toRefs, readonly, defineComponent } from 'vue';
export default defineComponent({
// 触发的事件的名称
emits: {
'update:dialogVisible': (val: boolean) => {
return val;
}
},
props: {
...
dialogVisible: { // 是否显示模态框
type: Boolean,
default: false
},
},
setup(props, { emit }) {
const { dialogVisible } = toRefs(props) as any;
let dialogVisibleData = ref(false);
const cancel = () => {
dialogVisibleData.value = false;
// 可以直接emit update事件，也可以改变dialogVisibleData value值，触发watch监听
emit('update:dialogVisible', dialogVisibleData.value);
};
// 监听props中dialogVisible值
watch(() => dialogVisible.value, (newValue: boolean, oldValue: boolean) => {
dialogVisibleData.value = newValue;
console.log(oldValue, newValue, '改变');
});
watch(() => dialogVisibleData.value, (newVal: boolean, oldVal: boolean) => {
emit('update:dialogVisible', newVal);
});
return { dialogVisibleData, cancel };
},
});
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。