vue如何像Element那样封装组件

用过 vue 的应该都知道 element ，因为确实是 vue ui 组件中做的非常不错的，里面的组件封装也比较值得学习。

前不久我发过一篇如何合法的在子组件中改变父组件的值，从而实现自定义组件的文章，但是里面用到了 TypeScript ，所以写法上和普通的不使用 TypeScript 的项目有很大差别，这里整理一下最简单的 vue 环境该怎么封装。

其实官网里有如何封装的描述，链接在这里 => 使用自定义事件的表单输入组件

而 element 中也是使用这种方法实现的。

首先我们看一下实现后的效果是怎么样的。

// 例如我们封装一个 switch 组件
<lw-switch 
v-model="val" 
:disabled="disable"
selectedVal="yes"
unSelectedVal="no"
:size="25"
@changeStart="changeStart"
@changeEnd="changeEnd"/>

// 然后在 vue 实例中绑定值

data () {
   return {
     // Switch
     val: false,
     disable: false,
   }
 },

// 这时我们点击 switch 组件后就可以在子组件内部改变父组件 v-model 绑定的值了。
// 而我们直接在子组件改变父组件的值 vue 是会报错的。

这里需要一些技巧

// 首先处理父组件 v-model 传入的值

props: {
  value: {
     // 绑定的值
     type: [Number, String, Boolean],
     default: true
   },
}

// 然后在子组件中添加一个 input 元素，并绑定上面的 value 
// 这里是核心
// input 事件需要绑定一个处理函数，在下面会贴出
 <input 
 ref="input"
 :value="value" 
 @input="_changeValue" 
 style="display: none;"/>

// 然后当我们在子组件触发某些事件后，需要去改变 value 的值

<div @click="_tapSwitch"></div>

// 处理函数
methods: {
    _tapSwitch() {
        // 这里触发事件后，手动执行 input 上面绑定的函数，并传入参数
       this._changeValue(false)
    },

    _changeValue(value) {
      // 这里手动触发一下 input 事件，并且把值传进去
      this.$emit('input', value)

      // 还可以向父组件传递自定义事件
      this.$emit('changeEnd', value)
    }
  },
// 然后就成功绑定了

最后放一个我在 GitHub 上封装的 switch 组件，可以去参考一下。

Vue Switch组件

原文地址： http://blog.csdn.net/qq_25243451/article/details/78934147