VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 详解vue父子组件关于模态框状态的绑定方案

    日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如:

    <template>
      <div class="page-xxx">
        //点击打开新增弹窗
        <button>新增</button>
        //点击打开编辑弹窗
        <button>编辑</button>
        //点击打开详情弹窗
        <button>详情</button>
        <Add :showAdd="false"></Add>
        <Edit :showEdit="false"></Edit>
        <Detail :showDetail="false"></Detail>
      </div>
    </template>
    

    子组件:

    <div class="page-add">
      <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
    </div>
    <script>
    export default {
      data() {
        return {
          dialogVisible: false,
        }
      },
      methods: {
        handleClose(val) {
          this.dialogVisible= false
        },
      },
    }
    </script>
    

    如何实现子组件和父组件模态框状态的同步

    方案一:使用.sync 修饰符

    父组件:

    <template>
      <div class="page-xxx">
        //点击打开新增弹窗
        <button @click="show = true">新增</button>
        <Add :show.sync="show"></Add>
      </div>
    </template>
    

    子组件:

    <div class="page-add">
      <el-dialog:visible="dialogVisible" @close="handleClose"></el-dialog>
    </div>
    <script>
    export default {
      props: {
        show: {
          type: Boolean
        }
      },
      watch: {
        show(value) {
          this.dialogVisible= value
        }
      },
      data() {
        return {
          dialogVisible: false,
        }
      },
      methods: {
        handleClose(val) {
          this.$emit('update:show', false);
        },
      },
    }
    </script>
    

    方案二:使用v-model

    父组件:

    <template>
      <div class="page-xxx">
        //点击打开新增弹窗
        <button @click="show = true">新增</button>
        <Add v-model="show"></Add>
      </div>
    </template>
    

    子组件:

    <div class="page-add">
      <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
    </div>
    <script>
    export default {
      props: {
        show: {
          type: Boolean
        }
      },
      watch: {
        show(value) {
          this.dialogVisible= value
        }
      },
      data() {
        return {
          dialogVisible: false,
        }
      },
      methods: {
        handleClose(val) {
          this.$emit('input', false)
        },
      },
    }
    </script>
    

    computed OR watch ?

    对于上面的两种方案,子组件内部还可以使用计算属性的写法

    computed
    export default {
      props: {
        show: {
          type: Boolean
        }
      },
      computed: {
        dialogVisible: {
          get() {
            return this.show
          },
          set(value) {
            return this.$emit('input', value)
          },
        },
      },
      methods: {
        handleClose(val) {},
      },
    }
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • vue 进阶之实现父子组件间的传值
    • Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
    • vue同步父子组件和异步父子组件的生命周期顺序问题
    • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
    • 深入理解Vue父子组件生命周期执行顺序及钩子函数
    • vue两个组件间值的传递或修改方式
    • 简单了解vue中父子组件如何相互传递值(基础向)

    广而告之:
    热门推荐:
    XHTML中不再使用HTML中的一些废弃元素

    我们进行CSS网页布局的时候,都知道它需要符合XHTML1.0规范,在.net昨天的文章中,向大家介绍了DTD。如果我们在进行CSS网页布局的时候,还在使用被W3C废弃的元素,那就失去了使用CSS的意义,虽然它们可能同样被样式控制。   在XHTML中不再使用HTML中的一些废弃元素。它们主要···

    详解ESLint在Vue中的使用小结

    ESLint是一个QA工具,用来避免低级错误和统一代码的风格 ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格; 2.审查代码是否存在语法错误; 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始化项目时选择是否使用 ESLint管理代码(选择Y则默···

    nodejs集成sqlite使用示例

    正在物色node上面的轻量级嵌入式数据库,作为嵌入式数据库的代表,sqlite无疑是个理想的选择方案。npm上集成sqlite的库主要有两个——sqlite3和realm。 realm是一个理想的选择方案,它最初是为移动app设计的,在node也可以运行的,但是不支持Windows系统。sqlite3是一个专为nodej···

    关于MySQL数据迁移--data目录直接替换注意事项的详解

    近日更换服务器,要做数据库迁移,将数据库内的数据从服务器A迁移到服务器B。由于数据量较大,直接做dump耗时太长,故而采用如下方式处理:首先,在服务器B上安装了与服务器A同版本的MySQL,停止MySQL服务,将安装后的data目录删除;然后,服务器A锁住全部表,从服务器A···

    举例讲解PHP面对对象编程的多态

    什么是多态? 多态性,其来自于dictionary.com的定义是"以不同形式,阶段或者类型出现在独立的组织中或者同种组织中,而不存在根本区别。"由该定义,我们可以认为,多态性是一种通过多种状态或阶段来描述相同对象的编程方式。其实,它的真正意义在于:实际开发中,我们只需···

    jQuery实现的点击图片居中放大缩小功能示例

    本文实例讲述了jQuery实现的点击图片居中放大缩小功能。分享给大家供大家参考,具体如下: 该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) jQuery3.2.1文件点击此处本站下载。 第二步:···

    HTML5实现多张图片上传功能

    图片上传之前也有写过,不过是单张上传的,最近有个业务需求是需要多张上传的,于是乎从新改写了一下 HTML结构: XML/HTML Code复制内容到剪贴板 <div class="container">       <label>请选择一个图像文件:<···

    ThinkPHP CURD方法之order方法详解

    ThinkPHP CURD方法的order方法属于模型的连贯操作方法之一,该方法用于对操作的结果排序。 具体用法如下: $Model->where('status=1')->order('id desc')->limit(5)->select(); 注意:连贯操作方法没有顺序,可以在select方法调用之前随便改变调用顺序。 支持对···

    剖析标注HTML元素时class比id所具有的优势

    在网页中有很复杂的 HTML 结构,如果我们使用 CSS 来定义相关的样式,就需要为这些结构指定相应的标志,然后再编写相应的 CSS 选择器来获取他们赋予样式。最常用的两个标注属性就是 id 和 class 了,例如: XML/HTML Code复制内容到剪贴板 <div class=”header&r···

    php判断输入是否是纯数字,英文,汉字的方法

    本文实例讲述了php判断输入是否是纯数字,英文,汉字的方法。分享给大家供大家参考。具体分析如下: 这里利用php的mb_strlen和strlen函数就可以轻松得知字符串的构成是全英文、英汉混合、还是纯汉字。简要说明如下: 1、如果strlen返回的字符长度和mb_strlen以当前编码计算的长···