Vue3中如何自定义双向绑定
更新时间:2023年11月16日 09:01:43 作者:青颜的天空
这篇文章主要介绍了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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue+element+cookie记住密码功能的简单实现方法
这篇文章主要给大家介绍了Vue+element+cookie记住密码功能的简单实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-09-09关于element-ui的隐藏组件el-scrollbar的使用
这篇文章主要介绍了关于element-ui的隐藏组件el-scrollbar的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05vue 使用iView组件中的Table实现定时自动滚动效果
要在css中设置table的高度,使数据过多时出现滚动条,将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden,接下来通过本文介绍vue使用iView组件中的Table实现定时自动滚动效果,需要的朋友可以参考下2024-05-05
最新评论