SOURCE

const nameMap = {
  click: '点击',
  hover: '覆盖',
	focus: '聚焦'
}
Vue.component('event-filter', {
  props: {
    name: String,
    cname: String
  },
  computed: {
    _cname: {
      get() {return this.cname},
      set(val) {this.$emit('update:cname', val)}
    }
  },
  template: '<div>我是 {{cname}} 事件 筛选器</div>',
  watch: {
    cname: {
      immediate: true, // 为什么得用true，或者还有什么别的办法
      handler(cname) {

        if(this.name && !cname) {
                  let i = 100;
        while(i--) {
          console.log(i);
        }
          this._cname = nameMap[this.name];
        }
      }
    },
  }
})

var Main = {
  data() {
    return {
      form: {
        events: []
      }
    }
  },
  computed: {
    result() {
      return this.form.events.map(e => {
        return {
          name: e.name,
          cname: e.cname
        }
      })
    }
  },
  created() {
    this.form = {
      events: [
        {name: 'click', cname: ''},
        {name: 'hover', cname: '覆盖'},
        {name: 'focus', cname: '聚焦'},
      ]
    }
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      console.log(JSON.stringify(this.result));
      this.$nextTick(() => {
        console.log(JSON.stringify(this.result));
      })
      // setTimeout(() => {
      //   console.log(JSON.stringify(this.result));
      // }, 0)
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.5/lib/index.js"></script>
<div id="app">
<template>
  <template
    v-for="event in form.events">
    <event-filter
      :key="event.name"
      :name="event.name"
      :cname.sync="event.cname">
    </event-filter>
  </template>
</template>
</div>

@import url("//unpkg.com/element-ui@1.4.5/lib/theme-default/index.css");