不容错过的Vue2.0组件开发

简述

（本文针对于有Vue有一定基础的人学习了解，环境搭建等入门教程网上很多，大家自行学习，也可留言，我会给出一些不错的教程博客供大家学习。）

一、通过一个小demo，让大家深入了解组件开发。并将教会大家以下知识。

（特色） v-model 在自定义组件中的使用。在送索引擎中，搜索 v-model 相关知识，绝大部分都是如何使用v-model这个指令进行数据双向绑定。然而，如何自定义一个组件，并且使用这个组件时可以用v-model，让自己的组件也支持数据双向绑定，是一个问题，也很少有教程。

2.自定义组件，组件的使用。这部分内容网络上的教程很多，不作为重点介绍。

3.组件间的通讯。本章中将会使用$emit进行父子组件中的通讯。并且提供工具类，降低耦合性。

4.（特色）两个组件配合使用，完成特定功能两个组件嵌套使用，完成效果和对数据的管理。

二、demo 说明

废话不多说，先上效果图。

demo.png

demo.gif

实现思路，自定义两个组件，一个标签组件“seltipoption”，方便使用v-for进行渲染，一个父组件"seltiplist"，管理v-model，接收"seltipoption"事件等。

编写

1 新建组件“seltipoption.vue”

该组件需要完成的功能是：显示标签内容、响应点击事件、高亮显示是否被选中。

2 新建组件 “seltiplist.vue”

该组件需要实现的功能：子组件内容分发、响应子组件“seltipoption”选中和取消选中事件、实现v-model的数据双向绑定。

3 组件使用

4 代码解读

1，如何实现的自定义组件v-model数据双向绑定？
如果要让组件的 v-model 生效，则这个组件它必须：

接受一个 value 属性
在有新的 value 时触发 input 事件，直接赋值给this.value是无效的，无法触发更新。
当为多选项时，更新seltiplist组件的value数组即可，但是当为单选项时，需要使用this.$emit('input', val);来触发更新。

2，父子组件通讯。
我加入了一个minx混合，也就是组件中看到引入的Emitter

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    var name = child.$options.componentName;
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat(params));
    }
  });
}
export default {
  methods: {
//事件向上传播，参数：接收事件组件的componentName属性，事件名称，传入的参数
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;
//根据组件的componentName值，找到父组件
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
///父组件触发$emit回调
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
//事件向下传播，参数：接收事件组件的componentName属性，事件名称，传入的参数（原理同上）
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

当 seltipoption.vue 响应click事件后，通过this.dispatch('seltiplist', 'handleOptionClick', this.value);
触发父组件 seltiplist.vue 的监听this.$on('handleOptionClick', this.handleOptionSelect);实现组件间的通讯。并且在一定程度上可以起到解耦的作用。

3, seltipoption 的选择状态判断
当为单选项时，判断seltipoption的value是否等于seltiplist的value；
当为多选项时，seltipoption的value存在于seltiplist value的数组中。
为了判断两个value是否值相等。此处引入工具underscore
github：https://github.com/jashkenas/underscore，
文档：http://underscorejs.org/

总结

代码量不多，也没有对每个方法进行说明，但是非常适合准备入手自定义组件同行们。提供了一些组件开发的思路，有很多时候组件配合使用更为便捷。
demo的代码已上传至github，以便参考学习。
github：https://github.com/DevilLeven/select_tip