SOURCE

// 子组件，是一个下拉菜单，他有一个功能：如果没有默认的v-model并且有下拉列表数据时，就自动恢复列表的第一个为v-model（默认选中功能）
Vue.component('child-comp', {
  template: 
  	'<el-select v-model="selected">' +
    	'<el-option v-for="item in data" :key="item" :value="item" :label="item"></el-option>' +
    '</el-select>',
  props: {
    data: Array,
    value: String
  },
  computed: {
    selected: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    selected(val) {
      console.log('#2', val)
    },
    data() {
      console.log(5)
      // 默认选中功能
    	if(
        !this.selected && 
        this.data && 
        this.data.length
      ) {
      	this.$emit('input', this.data[0])
    	}
    }
  },
  created() {
    console.log(4)
  }
})
// 父组件
new Vue({
  data() {
    return {
      animal: null,
      childData: null
    }
  },
  watch: {
    animal(val) {
      console.log('#1', val);
    },
    childData(val) {
      console.log(3);
    }
  },
  async created() {
    console.log(1);
    const result = await requestData();
    this.childData = result;
    const animal = await requestAnimal();
    this.animal = animal;
    console.log(2);
  }
}).$mount("#app")

function requestAnimal() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('dog')
    }, 500)
  })
}

function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        'cat',
        'dog',
        'bird'
      ])
    }, 500)
  })
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/element-ui/2.4.11/index.js
"></script>
<div id="app">
  <child-comp v-model="animal" :data="childData"></child-comp>
</div>

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