动态组件

根据数据的变化，动态切换组件的显示。

点击切换组件

首先定义两个子组件

      // 子组件
       app.component('myInput', {
            template:`
            <input />
            `
        })
       // 子组件
       app.component('myText', {
            template:`
            <div>text</div>
            `
        })

然后再父组件中调用之前定义的两个子组件和切换按钮。

            <myInput v-show="currendItem === 'myInput'"/>
            <myText v-show="currendItem === 'myText'"/>
            <button>切换</button>

最后绑定点击事件，设置data。

 			data(){
                return {
                    currendItem: 'myInput'
                }
            },
            methods: {
                handleClick(){
                    this.currendItem === 'myInput' ? this.currendItem = 'myText' : this.currendItem = 'myInput';
                }
            },

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件和异步组件</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 父组件
        const app = Vue.createApp({
            data(){
                return {
                    currendItem: 'myInput'
                }
            },
            methods: {
                handleClick(){
                    this.currendItem === 'myInput' ? this.currendItem = 'myText' : this.currendItem = 'myInput';
                }
            },
            template:`
            <myInput v-show="currendItem === 'myInput'"/>
            <myText v-show="currendItem === 'myText'"/>
            <button @click="handleClick">切换</button>
            `
        })
       // 子组件
       app.component('myInput', {
            template:`
            <input />
            `
        })
       // 子组件
       app.component('myText', {
            template:`
            <div>text</div>
            `
        })
        const vm = app.mount('#root');
    </script>
</body>
</html>

页面效果：
在这里插入图片描述
点击后

优化点击切换组件

使用component标签优化代码

<component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

使用component标签优化之前定义的两个子组件和切换按钮。

			<component :is="currendItem"/>
            <button @click="handleClick">切换</button>

使用keep-alive标签完善功能

<keep-alive>标签是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

使用keep-alive标签对component标签优化之后的代码进一步完善，将输入框切换之前的状态存储下来。

			<keep-alive>
                <component :is="currendItem"/>
            </keep-alive>
            <button @click="handleClick">切换</button>

异步组件

异步执行某些组件的逻辑

首先调用Vue的defineAsyncComponent 方法存储在AsyncComp中，然后在defineAsyncComponent 方法中传入一个函数，这个函数返回一个Promise。

		const AsyncComp = Vue.defineAsyncComponent(() => {
           return new Promise((resolve, reject) => {
               setTimeout(() => {
                resolve({
                    template: `<div>我是异步组件</div>`
                })
               }, 5000);
           })
       })

最后将AsyncComp写入子组件。

app.component('asyncItem', AsyncComp)

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件和异步组件</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 父组件
        const app = Vue.createApp({         
            template:`
            <asyncItem />
            `
        })

        const AsyncComp = Vue.defineAsyncComponent(() => {
           return new Promise((resolve, reject) => {
               setTimeout(() => {
                resolve({
                    template: `<div>我是异步组件</div>`
                })
               }, 5000);
           })
       })
       // 子组件
       app.component('asyncItem', AsyncComp)
        const vm = app.mount('#root');
    </script>
</body>
</html>