脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue modal弹框

vue利用sync语法糖实现modal弹框的项目实践

 更新时间：2022年07月26日 09:23:49   作者：个人前端知识随笔  
本文主要介绍了vue利用sync语法糖实现modal弹框的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

用过vue的开发者都知道vue是组件化开发的一个框架，基于组件化的原则，很多时候我们开发的时候都会把像modal、drawer这种弹框，抽屉类的组件作为一个单独的组件分出去，然后在在用到的页面引入进来这个时候就涉及到了visible 属性的父子组件的通信，我们常规的做法可以通过props,$emit的方式进行通信，但vue其实提供了一种更为优雅的实现方式，可以通过sync的语法糖来实现。 具体代码如下 父组件代码

  <div class="flex">
    <a-button @click="openModal">打开Modal弹框</a-button>
    <DemoModal :visible.sync="visible" />
  </div>
</template>

<script>
import DemoModal from './demoModal.vue'
export default {
  components: {
    DemoModal,
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    openModal() {
      this.visible = 'true'
    },
  },
}
</script>
<style >
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

子组件代码

  <a-modal
    title="弹框"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
  </a-modal>
</template>

<script>

export default {
 name:"DemoModal",
 props:{
  visible:{
    type:Boolean,
    default:false
  }
 },
 methods:{
  handleCancel(){
    this.$emit("update:visible",false)
  }
 }
}
</script>

效果图

下面简单说一下sync语法糖的原理 其实原理也是基于props emit，只不过语法糖会帮我们做一些事，父组件里:visible.sync="visible"会被扩展成:visible=""visible@upate:visible="value−>visible=value"其中value是子组件传过来的参数，这也就是为什么子组件关闭的时候要用这个写法this.emit("update:visible",false) 通过语法糖来实现modal弹框，可以让我们的代码更为简洁更为优雅，其用法在drawer里也是一样的这里就不一一阐述了

到此这篇关于vue利用sync语法糖实现modal弹框的项目实践的文章就介绍到这了,更多相关vue modal弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在vue.config.js中优化webpack配置的方法

    在vue.config.js中优化webpack配置的方法

    在日常开发中我们离不开打包工具webpack,但是不同的配置会影响我们项目的运行构建时间,也会影响打包之后项目包的大小,这篇文章记录一下我使用过的可以优化webpack的配置,需要的朋友可以参考下
    2024-05-05
  • 关于vue2响应式缺陷的问题

    关于vue2响应式缺陷的问题

    这篇文章主要介绍了关于vue2响应式缺陷的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • webpack+vue.js实现组件化详解

    webpack+vue.js实现组件化详解

    vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。
    2016-10-10
  • Vue路由对象属性 .meta $route.matched详解

    Vue路由对象属性 .meta $route.matched详解

    今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现商品加减计算总价的实例代码

    vue实现商品加减计算总价的实例代码

    这篇文章主要介绍了vue实现商品加减计算总价的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • Vue.js中v-model指令的用法介绍

    Vue.js中v-model指令的用法介绍

    这篇文章介绍了Vue.js中v-model指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • vue3.x 使用jsplumb实现拖拽连线

    vue3.x 使用jsplumb实现拖拽连线

    这篇文章主要为大家详细介绍了vue3.x 使用jsplumb实现拖拽连线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue实现多条件筛选超简洁代码

    vue实现多条件筛选超简洁代码

    这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下
    2023-09-09
  • Vue3+X6流程图实现数据双向绑定详解

    Vue3+X6流程图实现数据双向绑定详解

    这篇文章主要为大家详细介绍了Vue3如何结合X6流程图实现数据双向绑定,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下
    2022-09-09

最新评论