根据数据的变化，动态切换组件的显示。
首先定义两个子组件
// 子组件
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>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。
使用component标签优化之前定义的两个子组件和切换按钮。
<component :is="currendItem"/>
<button @click="handleClick">切换</button>
<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>
打开浏览器五秒后页面渲染出：我是异步组件
动态组件
使用component标签动态绑定组件
异步组件
调用defineAsyncComponent 方法传入一个函数，函数返回Promise
（完）