Vue 2.0 入门系列（7）组件实例之模态框

最新推荐文章于 2022-09-03 14:53:26 发布

weixin_34075551

最新推荐文章于 2022-09-03 14:53:26 发布

阅读量196

点赞数 1

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000009204344

版权

演示

本节要实现的是一个模态框组件，效果如下：

主要功能如下：

用户点击按钮，激活模态框
模态框可以自定义消息
提供关闭模态框的按钮

参考的 bulma 样式如下：

<div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- 自定义模态框内容 -->
  </div>
  <button class="modal-close"></button>
</div>

实现

首先，是用户点击按钮，显示模态框：

<div id="root" class="container">
    <button type="button" class="button is-primary" @click="show()">显示</button>
    <zen-modal v-if="showModal"></zen-modal>
</div>

<script type="text/javascript">
    Vue.component('zen-modal',{
        template: `
            <div class="modal is-active">
              <div class="modal-background"></div>
              <div class="modal-content">
                  <div class="box">
                      <slot>默认模态框内容</slot>
                  </div>     
              </div>
              <button class="modal-close"></button>
            </div>
        `
    });
    var vm = new Vue({
        el:"#root",
        data: {
            showModal:false
        },
        methods:{
            show(){
                this.showModal = true;
            }
        }

    });

</script>

到这一步，用到的都是前几讲学过的知识：

使用 slot 占位；
通过 v-if 来决定模态框是否显示；

难点就在于模态框的关闭，这个过程涉及到了「组件与实例之间的交互」：用户点击关闭按钮（组件）后，要向父实例传递一个信号，令其不显示组件。

这个与上一节学过的相反：上一节是实例通过属性方式传递数据给组件（使用 props），这一节则是组件传递数据给实例。Vue 提供了解决方案：

组件中使用 $emit 来触发事件；
实例中使用 v-on 来监听该事件

完整实例如下：

<body>
    <div id="root" class="container">
        <button type="button" class="button is-primary" @click="show()">显示</button>
        <zen-modal v-if="showModal" @fireclose="showModal = false"></zen-modal>
    </div>

    <script type="text/javascript">
        Vue.component('zen-modal',{
            template: `
                <div class="modal is-active">
                  <div class="modal-background"></div>
                  <div class="modal-content">
                      <div class="box">
                          <slot>默认模态框内容</slot>
                      </div>     
                  </div>
                  <button class="modal-close" @click="$emit('fireclose')"></button>
                </div>
            `
        });
        var vm = new Vue({
            el:"#root",
            data: {
                showModal:false
            },
            methods:{
                show(){
                    this.showModal = true;
                }
            }

        });

    </script>

说明：

用户点击关闭模态框时候，触发「fireclose」事件；
父实例监听该事件，设置 showModal 的值为 false；

总结一下组件的内部通信（即组件与它的实例）：

实例传递数据给组件：用 props 声明
组件传递数据给实例：用 $emit 与 v-on

附录：

源码

weixin_34075551

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 2.0 入门系列（7）组件实例之模态框

演示本节要实现的是一个模态框组件，效果如下：主要功能如下：用户点击按钮，激活模态框模态框可以自定义消息提供关闭模态框的按钮参考的 bulma 样式如下：<div class="modal is-active"> <div class="modal-background"></div&g...
复制链接

扫一扫

Vue 2.0 入门系列（7）组件实例之模态框

演示

实现

“相关推荐”对你有帮助么？