vue前端开发那些事——vue组件开发

　　vue的学习曲线不是很陡（相比其它框架，如anglarjs），官方文档比较全面，分为基础篇和高级篇。我们刚开始学习的时候，肯定像引用jquery那样，先把vue的js引进来，然后学习基础内容。如果仅仅停留在基础内容，没有学习vue组件的话，我觉得也就没有什么意思了。vue的核心思想——组件，是一个很好的东西，它提供了功能复用。

 1、单文件组件

        所谓单文件组件，顾名思义，一个vue格式的文件就是一个组件。好比python和js的模块，文件即模块。vue组件带有自己的模板，可以理解为视图，也带有自己数据及逻辑。数据可以从外部来，通过Prop接收。用图形表示：

　　由此可见，单文件组件就是一个完整而独立的体系。注意，style有个属性scope表示仅作用于当前组件。wpf当中的控件，有自己的xaml（视图），逻辑，可以外部绑定数据源。我觉得vue组件类似wpf中的用户控件。因为用户控件组合了基础的控件，比如Button、TextBlock等等。用户控件可直接当成一个独立的组件使用。它和vue组件一样，都是从外部获取特定的信息，然后构建自己内部的数据以及逻辑。其实组件体现的是面向对象中的“封装”思想。

2、动态组件&异步加载

     有时候读了官方的文档，还是不明白，这时候就需要上网搜搜相关资料。好比《圣经》或者《道德经》中的经文是需要慢慢揣摩和体会的。当然vue的动态组件、以及组件的异步加载也是需要在实践当中慢慢体会的。下来分享一个我在项目中使用的例子：

在后台管理页面中，编辑、增加一条信息，这时候需要在弹出页面中操作。因此，我就封装了一个弹出模态框（带有遮罩效果）的组件。而编辑页面是另外的一个组件。所以，需要把编辑页面的组件“送到”弹出框的组件中呈现。有点像“装饰器模式”，不要原生态地呈现编辑组件，而是把它包装一番，再呈现，如下图：

后台管理中像这样的编辑页面非常多，所以弹出框组件的意义就在这，复用。我上面说了需要把“编辑软件资源”的组件，送到弹出框组件显示。如何送呢？其实也不难。我把这个组件作为弹框组件的子组件。那么这个弹框组件有很多个编辑组件。现在问题来了，如何控制它们显示？当我点击“编辑软件资源”的时候，弹出对应的页面，当我点击编辑新闻的时候，它要弹出新闻的页面，难道我要控制组件的显示隐藏吗？这个情况有点像“Tab”，任何时候，只能呈现一个TabItem，那么其它的只能隐藏掉。好了，我们也可以这么做。还有另外一个问题，我们如何导入这些组件，一次性import多个组件，貌似也没有什么问题。这会不会影响页面加载的性能呢？我想肯定会。

我想到了秦腔中的“变脸”，对，这个很有意思，一个人通过变脸可以扮演多个人。和演员一样，比如最近的一个电视剧中景甜扮演了“奉剑”和“千湄”两个角色。vue里面的动态组件就是如此，一个组件总是“扮演”各种组件。异步加载，当我需要用你的时候，再去import，这显然是合理的。说了这么多，我们看看代码：

 <template>
 <transition name="modal">
     <div class="modal-mask">
         <div class="modal-wrapper">
             <div class="modal-container" :style="{width:width,height:height}">

                 <div class="modal-header">
                     <slot name="header">
                         {{title}}
                     </slot>
                     <button class="modal-default-button" @click="close">
                         X
                     </button>
                 </div>

                 <div class="modal-body" :style="{height:bodyHeight,width:bodyWidth}">
                     <slot name="body">
                         <component :is="currentComponent" @close="close" :id="id"></component>
                     </slot>
                 </div>

             </div>
         </div>
     </div>
 </transition>
 </template>

 <style scoped>
 .modal-mask {
     position: fixed;
     z-index: 9998;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, .5);
     display: table;
     transform: translateX(-50%) translateY(-50%);
     transition: opacity .3s ease;
 }

 .modal-wrapper {
     display: table-cell;
     vertical-align: middle;
 }

 .modal-container {
     margin: 0px auto;
     padding: 20px 30px;
     background-color: #fff;
     border-radius: 2px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
     transition: all .3s ease;
     font-family: Helvetica, Arial, sans-serif;
 }

 .modal-header h3 {
     margin-top: 0;
     color: #42b983;
 }

 .modal-body {
     margin: 10px 0;
     overflow-y: auto
 }

 .modal-default-button {
     float: right;
     background: none;
     border: none;
     cursor: pointer;
 }

 /*
  * The following styles are auto-applied to elements with
  * transition="modal" when their visibility is toggled
  * by Vue.js.
  *
  * You can easily play with the modal transition by editing
  * these styles.
  */

 .modal-enter {
     opacity: 0;
 }

 .modal-leave-active {
     opacity: 0;
 }

 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
 }
 </style>

 <script>
 export default {
     props: {
         title: {
             type: String
         },
         width: {
             type: String,
             required: false,
             default: '30%'
         },
         height: {
             type: String,
             required: false,
             default: '65%'
         },

         currentComponent: {
             type: String,
             required: true
         },
         id: {
             type: Number,
             default: 0
         }
     },
     components: {
         newsItem(resolve) {
             require(['../Admin/newsItem'], resolve)
         },
         softwareItem(resolve) {
             require(['../Admin/softwareItem'], resolve)
         }
     },
     data() {
         return {
             bodyHeight: '98%',
             bodyWidth: '100%'
         }
     },
     methods: {
         close(type) {
             if (type)
                 this.$emit('close', type);
             else
                 this.$emit('close');
         }
     }
 }
 </script>

Props中接收 currentComponent，要呈现哪个组件，交给调用方，谁调用我，谁就必须告诉我，该显示哪个子组件。

3、组件通信

    组件间通信问题，是一个普遍问题。组件再独立也得和其它组件协同完成任务吧。没有一个组件能完成所有事情。常见的那就父子之间的通信以及兄弟之间的通信。有没有父组件引发了一个事件，由子组件来处理呢？貌似没有。如果有的话，就是父组件更改了Props中属性的值。如果子组件非要在更改值
的时候，作出某些处理的话，那么就用Watch了。

  props: ["pageIndex", "pageSize", "total", "groups", "skin"],

watch: {
          total(val, oldVal) {
              if (val != oldVal) {
                 this.render();
              }
          },
      }

这个watch监视的是total（总页数），是分页组件监视Props中的total，一旦total改变，那么分页组件需要render，调用render方法重新渲染自己。

 子组件触发事件，父组件监听，这是非常常见的。比如弹出框组件中的关闭事件，分页组件中的 pageHandler 分页事件，这些都要父组件来处理，子组件通过 $emit，这是vue全局的方法，哪个组件都可以用。父组件必须监听pageHandler事件：

 <ym-pager v-if="total" :page-index="pageIndex" :page-size='pageSize' :total='total' :groups="5" @pageHandler="loadData"></ym-pager>

兄弟之间的通信，如何解决呢？网上一搜，基本上都是给一个总线级别的组件，这个组件就是用来通讯的，谁需要发布事件，就往这里发，谁需要处理，那么就监听相关事件。理论上可以实现，但是我在实践的过程中，始终没有成功，不知道为什么。还有一种思路，

通过vuex实现，事件发布方，更改vuex中的某个状态值，那么监控方发现这个状态有变化的时候，就去处理事件。vuex是一个集中式的状态管理器。“天下有变，则命一上将将荆州之军以向宛、洛。。。。。。”，《隆中对》反映了蜀汉对天下大势要密切监视，一旦

发生了变化，就要采取行动了。兄弟之间的通信，我们项目还真没有用到过，如果需要的同学，可进一步查阅资料，这里仅探讨思路。

4、slot

   这个特别有用，也有意思。插槽，它反映了一种IOC（控制反转）的思想。本来子组件的呈现由自己做决定，可是某些情况下，子组件的某一部分变数很大，需要抽象出来，就用了slot先占着，等父组件调用的时候，再告诉该如何渲染。比如我们有一个table组件，这个组件实现了分页等功能。可是table的表头和表的内容充满着变数，若是由父组件通过Props传递，也可以，就是特别麻烦，传递的东西太多了，而且子组件这边也需要很多处理。大道至简，用slot，简洁。table组件不用那么费劲。调用table的父组件也不用想着如何更好地传递数据了。

  <table class="ym-table table-hover">
         <slot name="thead"></slot>
         <slot name="tbody"></slot>
  </table>

table组件中定义了两个命名slot，看看如何调用：

  <YmTable :page-title="pageTitle" :total="totalCount" :page-size="pageSize" @pager="pager" @newItem="newItem">
        <thead slot="thead">
            <tr>
                <th>序号</th>
                <th>软件名称</th>
                <th>简介</th>
            </tr>
        </thead>
        <tbody slot="tbody">
            <tr v-for="(item,index) in items" :key="item.id">
                <td v-text="getIndex(index)"></td>
                <td>
                    {{item.name}}
                </td>
                <td>
                    {{item.summary}}
                </td>
            </tr>
        </tbody>

    </YmTable>

5、vue生命周期

生命周期是个老生常谈的问题。是个对象，那就总有个生命周期吧。比如.net中Page对象，页面的生命周期，而且这个还是主考官特别爱考的问题。Android的中Activity的生命周期。Page和Activity对象的功能有点像，提供用户操作的界面，可以简单地理解为UI。

网上最著名的就是这张图：

这个图，我们大致理解一下，它核心就是如何把VM（虚拟的dom）转换为实际dom，而且在什么时候转换。这里有一点记住就行了，Created的时候，dom还没有被渲染出来，此时不宜操作dom相关的事情。Mounted的时候，做的事情就多了。比如，在mounted的时候，通过layui绑定form的提交事件。

 mounted() {
        let that = this;

        var form = layui.form;

        //绑定form提交事件

        layui.form.on('submit(*)', function (data) {

            that.summit();

            return false;
        });
    },

再例如，封装了一个Select的组件，在updated的时候，执行select的render：

  updated() {
        layui.form.render('select');
    },

总之，vue生命周期中,都会留有钩子函数，通过这些才能把我们的业务逻辑注入到Vue对象中，而且得到执行。我们做一件事情，要看准时机，如果时机不对，事倍功半，甚至一败涂地。诸葛亮出山的时机不对啊。

6、实例变量 && $nextTick

  文档中是这么说的：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用这个方法，获取更新后的DOM。很抽象啊，不理解。但是我需要它。我封装了一个YmRichText组件，这个组件里是调用了kindeditor，富文本框。

mounted() {
        let that = this;
        this.$nextTick(function () {
            that.kedit('textarea[name="content"]');
        });

    },
    methods: {
        getConent() {
            return editor.html();
        },
        kedit(k) {
            let that = this;
            window.editor = KindEditor.create(k, {
                width: '98%',
                height: that.height + 'px',
                uploadJson: that.uploadFileUrl,
                allowFileManager: false
            });

        }

    }

当在mounted的时候，不管怎么样创建的editor对象都为空。所以使用了$nextTick。按理说，不应该啊，模板中有textarea，kindeditor的js和css也加载上了，而且也在mounted的时候调用的。但是反过来想，在$nextTick调用成功，说明在当前周期内，是不会调用kindeditor的方法的。我们的分页组件中，也使用了 $nextTick，这个倒好理解，因为在created时候，调用render，render方法中会操作dom，所以只能等下一个周期执行了。

    created() {
        this.render();
    },
    watch: {
        total(val, oldVal) {
            if (val != oldVal) {
                this.render();
            }
        },
        pageIndex(val) {
            this.cindex = val;
            if (val == 1) {
                this.render();
            }
        }
    },
    methods: {
        render() {
            let self = this;
            this.$nextTick(function () {
                layui.laypage.render({
                    elem: self.pagerId,
                    skin: self.cskin,
                    count: self.total, //总数数
                    limit: self.pageSize, //每页显示条数
                    groups: self.cgroups, //连续显示分页数
                    curr: this.cindex, //当前页
                    jump: function (obj, first) {
                        if (!first) self.$emit("pageHandler", obj.curr);
                    }
                });
            });
        }
    }

实例变量多了，比如引用父组件的$parent,引用子组件的$refs，$refs特别有用，比如要执行子组件里的方法或者获取子组件的数据。

 <ym-company-select :oldCompanyId="oldCompanyId" ref="company"></ym-company-select>

this.data.companyId = this.$refs.company.companyId;

以上，就是我探讨的vue组件开发的一些问题。