php控制模态框,vue中实现模态框（通用写法）

下面我就为大家分享一篇vue实现模态框的通用写法推荐，具有很好的参考价值，希望对大家有所帮助。

在看了element组件的源码后发现，所有模态框其实实现方法都差不多，主要用到了vue在组件化上的双向绑定。代码：

模态框

export default {

props: {

visible: Boolean

},

created() {

},

data() {

return {

myVisible: this.visible,

},

computed: {},

methods: {

},

components: {},

watch: {

myVisible: function (val) {

this.$emit('update:visible', val)

},

visible: function (val) {

this.myVisible = val

}

}

}

上面代码主要的部分是watch里面的代码，实现监听数据变化，及时更新。所以在使用的时候就很方便了，在component注册组件之后：

注：这里必须使用sync，要不是无法双向绑定的

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：