Vue中事件绑定和vm.$listeners

问题

最近看别人的源码, 看到一个v-on="on"不太理解, 应为我们通常绑定事件都是v-on:click="event"这样来的,于是自己试试了

探索

在子组件中设置

v-on="{ change: test }" 

发现能正常绑定,emm。
有空还是去看Vue的源码吧, 工作都没有的我…

实践

于是我们可以这样组封装一些组件

<template>
  <el-select v-model="newValue" v-bind="props" v-on="on" multiple>
    <el-option
      v-for="(item, index) in list"
      :value="item.id"
      :label="item.name"
      :key="index"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: [String, Number, Array],
    props: Object,
    on: Object
  },

  data() {
    return {
      list: [],
      newValue: this.value
    }
  },

  watch: {
    value(val) {
      if (!(val instanceof Array)) {
        this.newValue = [val]
      } else {
        this.newValue = val
      }
    },

    newValue(val) {
      console.log(this)
      this.$emit('input', val)
    }
  },

  async created() {
    this.list = await this.$service.system.role.list()
  },
  methods: {
    test(e) {
      console.log(e, 'test')
    }
  }
}
</script>

<style lang="stylus" scoped></style>

调用

这里仅做说明, 这里是调用了其他的组件, 通过这种方法绑定数据, 可以参考用法。

vm.$listeners

这个属性就是在父组件中引用的子组件上绑定事件(<child @eventName="myEvent"></child>), 然后我们可以在子组件的this.$listeners可以取到eventName这个方法。
子组件可以通过this.$emit('eventName', data) 执行父组件绑定的方法。
其实就是常用的子组件向父组件传递数据。