动态组件

Vue.js 提供了一个特殊的内置组件 <component> 来动态地挂载不同的组件，主要利用 is 属性，同时可以结合 v-bind 来动态绑定。关于动态组件的使用如示例代码 3-4-1 所示。

<div id="app">
    <span>点击切换：</span>
    <button @click="name = 'one'">组件1</button>
    <button @click="name = 'two'">组件2</button>
    <button @click="name = 'three'">组件3</button>
    <component :is="name"></component>
</div>
Vue.createApp({
    data(){
        return {
            name: 'one'
        }
    },
    components: {
        one: {template: '<div>我是组件一:<input></input></div>'},
        two: {template: '<div>我是组件二:<input></input></div>'},
        three: {template: '<div>我是组件三:<input></input></div>'}
    }
}).mount("#app")

在上面的代码中，将 data 的 name 属性进行了动态绑定，当分别修改 name 的值时(one、two、three)，<component> 便会分别替换成对应的组件。动态组件的特点总结如下：

动态组件就是把几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。
在挂载点使用 <component> 标签，然后使用 is = "组件名"，同时可以结合 v-bind 来动态绑定，它会自动去找匹配的组件名。

<component> 默认不会保存上一次的组件状态，例如上面的代码运行时，如果我们在 <input> 中输入一些值，当组件被替换时，这些内容就消失了，如果需要保留组件状态，可以使用内置组件 <keep-alive>，如示例代码 3-4-2 所示。

示例代码 3-4-2　动态组件的运用 <keep-alive>

<div id="app">
    <span>点击切换：</span>
    <button @click="name='one'">组件1</button>
    <button @click="name='two'">组件2</button>
    <button @click="name='three'">组件3</button>
    <keep-alive>
        <component :is="name"></component>
    </keep-alive>
</div>

<script type="text/javascript">
    Vue.createApp({
        data(){
            return {
                name: 'one'
            }
        },
        components: {
            one: {template: '<div>我是组件一:<input></input></div>'},
            two: {template: '<div>我是组件二:<input></input></div>'},
            three: {template: '<div>我是组件三:<input></input></div>'}
        }
    }).mount("#app")
</script>

使用 <keep-alive> 之后，我们再次切换组件，这时组件的状态就可以得到保留，在后面的章节中会讲到 Vue Router，其中的 <router-view> 就是动态组件的一种形式。