分析Vue框架源码心得

1、在封装一个公用组件，比如button按钮，我们多个地方使用，不同类型的button调用不同的方法，我们就可以这样用

代码片段：

<lin-button v-for="(item,index) in operate"              
            @click.native.prevent.stop="buttonMethods(item.func, scope.$index, tableData)">
</lin-button>

methods里面

buttonMethods(func, index, row) {
  const _this = this
  const { methods } = this.$options  //注意这部分
  methods[func](_this, index, row)   // 注意这部分
},
handleEdit(_this, index, row) {
  _this.$emit('handleEdit', { index, row })
},
handleDelete(_this, index, row) {
  _this.$emit('handleDelete', { index, row })
}

this.operate = [{ name: '编辑', func: 'handleEdit', type: 'edit' }, { name: '删除', func: 'handleDelete', type: 'del' }]

const { methods } = this.$options
methods[func](_this, index, row)
通过this.$options获取到到当前实例里面的数据，包括：data、props、computed、methods等
通过es6的解构语法获取到methos
通过func获取到methods里对应的方法，然后传入参数，执行