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>