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