详解vue父子组件关于模态框状态的绑定方案

前端  /  管理员 发布于 5年前   240

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

子组件：

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

方案一：使用.sync 修饰符

父组件：

子组件：

方案二：使用v-model

父组件：

子组件：

computed OR watch ?

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

computedexport 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中父子组件如何相互传递值（基础向）