javascript - Vuejs中，如何给所有props添加watcher，并使用同一个函数作为回调？

Question

正如标题，我想为所有 Prop 添加观察者和相同的回调，但我需要在子组件中这样编码:

<script>
export default {
  props: {
    a: String,
    b: String,
    c: String
  },
  watch: {
    a (v) { this.handler(v) },
    b (v) { this.handler(v) },
    c (v) { this.handler(v) },
  },
  methods: {
    handler (v) {
      // code...
    }
  }
}
</script>

你知道如何简化吗？

Answer 1

使用函数构建您的组件。

function buildComponent(properties){
  const base = { methods:{ handler(v){ console.log(v) }}, props:{}, watch:{}}

  for (let prop of properties){
    base.props[prop] = String
    base.watch[prop] = function(v) {this.handler(v)}
  }
  return base
}

export default buildComponent(["a","b","c"])

Vue 就是 javascript。