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

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

其实官网里有如何封装的描述，链接在这里 =>

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

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

// 例如我们封装一个 switch 组件
     // 然后在 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 事件需要绑定一个处理函数，在下面会贴出 // 然后当我们在子组件触发某些事件后，需要去改变 value 的值
     
// 处理函数methods: {    _tapSwitch() {        // 这里触发事件后，手动执行 input 上面绑定的函数，并传入参数       this._changeValue(false)    },    _changeValue(value) {      // 这里手动触发一下 input 事件，并且把值传进去      this.$emit('input', value)      // 还可以向父组件传递自定义事件      this.$emit('changeEnd', value)    }  },// 然后就成功绑定了

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

原文地址：