交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 详解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中父子组件如何相互传递值(基础向)

    广而告之:
    热门推荐:
    Mysql的数据库迁移到另一个机器上的方法详解

    1.先找到迁移服务器上的Data文件,我安装的是mysql5.7,默认安装的路径。那么就是在C:\ProgramData\MySQL文件里面,先把隐藏文件打开。 这个Data文件就是你的数据文件;将你要迁移的数据库文件放到这里如下: 然后打开my.ini:找到datadir,然后将你的Data文件路径复制到下···

    MySQL 转义字符使用说明

    MySQL的转义字符“\” mfc_basic MySQL识别下列转义字符: \0 一个ASCII 0 (NUL)字符。 \n 一个新行符。 \t 一个定位符。 制符分隔 \r 一个回车符。 \b 一个退格符。 \' 一个单引号(“'”)符。 \" 一个双引号(“"”)符。 一个反斜线(“\”)符。 \% 一个“%”符。它用于在正文中搜索···

    织梦后台不支持上传bmp格式图片的解决方法

    就算是后台-系统-附件设置,里面添加了bmp,上传bmp格式图片系统还是会提示你“文件类型不正确!” 解决方法   1、后台-系统-附件设置,添加bmp   2、\include\dialog\select_images_post.php 找到 ···

    jQuery特殊符号转义的实现

    我们在使用jquery选择器的时候 对一些ID属性中有特殊符号的地方需要进行转义。 列举部分如下: <input id="entity.username" type="text" value="hello" /> alert($("#entity\\.username").val()); <input id="entity:username" type="text" value="hello" /> al···

    一个收集图片的bookmarlet(js 刷新页面中的图片)

    首先看整体: 复制代码 代码如下: javascript:w=window.open("about:blank","images","scrollable=yes");w.document.open();for(i=0;i<document.images.length;i++)w.document.write("<img src='" + document.images[i].src + "' /><br /><br />");w···

    php常见的页面跳转方法汇总

    在php编写中有时会用户页面跳转,在这里收集了几种不错的跳转方法,可以用到。 用HTTP头信息实现 也就是用PHP的HEADER函数。PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如声明返回信息的类型("Context-type: xxx/xxx"),页面···

    PHP判断上传文件类型的解决办法

    分享给大家php判断上传文件类型的方法,大家一起学习学习。 /** * 读取文件前几个字节 判断文件类型 * @return String */ function checkTitle($filename){ $file=fopen($filename, "rb"); $bin=fread($file, 2); //只读2字节 fclose($file); $strInfo =@unpa···

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器【终结篇】 JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】 Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框···

    php获取指定数量随机字符串的方法

    本文实例讲述了php获取指定数量随机字符串的方法。分享给大家供大家参考,具体如下: function getARandLetter($number = 1) { if ($number == 0) return FALSE; //去除0 $number = $number < 0 ? - $number : $number; //如果小于零取正值 $letterArr = array (···

    快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果。 我的进度条是显示下载文件···