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，要不是无法双向绑定的

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

立即学习“前端免费学习笔记（深入）”；

相关文章：

解决vue页面刷新或者后退参数丢失的问题

解决vue页面刷新或者后退参数丢失的问题

解决vue页面刷新或者后退参数丢失的问题

以上就是vue中实现模态框（通用写法）的详细内容，更多请关注【创想鸟】其它相关文章！