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>
