Vue自定义组件-动态组件

<template>
  <div class="page-list">
    <span class="list-txt">{{ title }}</span>
    <!-- <ex-btn
      v-if="current == 'ex-btn'"
      v-on:myClick="myClick"
      :msg="msg"
    ></ex-btn>
    <ex-btn2 v-else v-on:myClick="myClick" :msg="msg">
      <img slot="icon" src="xxx.png" />
    </ex-btn2> -->
    <component
      keep-alive
      :is="current"
      v-on:myClick="myClick"
      :msg="msg"
    ></component>
  </div>
</template>
<script>
import btn from './button.vue'
import btn2 from './but2.vue'

export default {
  props: {
    title: { default: '标题' },
    msg: { default: '按钮' },
    current: { default: 'ex-btn' }
  },
  components: {
    'ex-btn': btn,
    'ex-btn2': btn2
  },
  methods: {
    myClick: function () {
      console.log('按钮被点击')
      this.$emit('myClick')
    }
  }
}
</script>

//使用
<template>
  <div id="list">
    <ex-list current="ex-btn2" title="标题1" msg="按钮1"></ex-list>
    <ex-list current="ex-btn" title="标题2" msg="按钮2"></ex-list>
    <ex-list
      current="ex-btn"
      title="标题3"
      msg="按钮3"
      v-on:myClick="test"
    ></ex-list>
    <ex-list
      ref="btnlist"
      current="ex-btn"
      title="标题4"
      msg="按钮4"
      v-on:myClick="test"
    ></ex-list>
  </div>
</template>
<script>
import myList from '../../components/demo/list.vue'
export default {
  name: 'list',
  components: {
    'ex-list': myList
  },
  methods: {
    test: function () {
      console.log('自定义')
      console.log('属性', this.$children)
      console.log('属性', this.$refs.btnlist.title)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  }, // 组件实例化之前
  created: function () {
    console.log('created')
  }, // 组件实例化了
  beforeMount: function () {
    console.log('beforeMount')
  }, // 组件写入dom结构之前
  mounted: function () { // 组件写入dom结构了
    console.log('mounted')
    console.log(this.$children)
    console.log(this.$refs)
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  }, // 组件更新前
  updated: function () {
    console.log('updated')
  }, // 组件更新比如修改了文案
  beforeDestroy: function () {
    console.log('beforeDestroy')
  }, // 组件销毁之前
  destroyed: function () {
    console.log('destroyed')
  }// 组件已经销毁
}
</script>