组件妙用

动态 v-for 组件

<component
  v-for="(item, index) in componentList"
  :key="index"
  :is="item"
></component>

@hook

<component
  @hook:created="isShow=true"
  @hook:mounted="isShow=false"
  @hook:updated="isShow=false"
></component>

.sync 语法糖

// 子组件修改父组件的值
<child :fatherData.sync="childData"></child>

// 等同
<child :childData="fatherData" @update:childData="e => fatherData = e"></child>

// 更新
this.$emit('update:childData', newValue);