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记住密码功能的简单实现方法

    这篇文章主要给大家介绍了Vue+element+cookie记住密码功能的简单实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 拿来就用vue-gird-layout组件封装示例

    拿来就用vue-gird-layout组件封装示例

    这篇文章主要介绍了vue-gird-layout组件封装示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 关于axios配置多个请求地址(打包后可通过配置文件修改)

    关于axios配置多个请求地址(打包后可通过配置文件修改)

    这篇文章主要介绍了关于axios配置多个请求地址(打包后可通过配置文件修改),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue如何实现响应式系统

    Vue如何实现响应式系统

    这篇文章给大家整理了关于Vue如何实现响应式系统的相关知识点内容,有兴趣的朋友可以参考学习下。
    2018-07-07
  • Vue-cli框架实现计时器应用

    Vue-cli框架实现计时器应用

    这篇文章主要为大家详细介绍了Vue-cli框架实现计时器应用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 关于element-ui的隐藏组件el-scrollbar的使用

    关于element-ui的隐藏组件el-scrollbar的使用

    这篇文章主要介绍了关于element-ui的隐藏组件el-scrollbar的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue.js的复用组件开发流程完整记录

    Vue.js的复用组件开发流程完整记录

    这篇文章主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue 使用iView组件中的Table实现定时自动滚动效果

    vue 使用iView组件中的Table实现定时自动滚动效果

    要在css中设置table的高度,使数据过多时出现滚动条,将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden,接下来通过本文介绍vue使用iView组件中的Table实现定时自动滚动效果,需要的朋友可以参考下
    2024-05-05
  • Vue中常见的几种传参方式小结

    Vue中常见的几种传参方式小结

    Vue组件的使用不管是在平常工作还是在面试面试中,都是频繁出现的,下面这篇文章主要给大家介绍了关于Vue中常见的几种传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue配置文件中的proxy配置方式详解

    Vue配置文件中的proxy配置方式详解

    今天被vue中proxy配置困扰了一天,记录一下,下面这篇文章主要给大家介绍了关于Vue配置文件中的proxy配置方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06

最新评论