0
点赞
收藏
分享

微信扫一扫

Vue.js -- 动态组件&异步组件

动态组件

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

点击切换组件

首先定义两个子组件

      // 子组件
       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>
    <title>动态组件和异步组件</title>
    <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>
    <title>动态组件和异步组件</title>
    <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>

打开浏览器五秒后页面渲染出:我是异步组件

总结

动态组件

==使用component标签动态绑定组件==

异步组件

==调用defineAsyncComponent 方法传入一个函数,函数返回Promise==

结语

本小节到此结束,谢谢大家的观看!

如有问题欢迎各位指正

举报

相关推荐

0 条评论