动态组件的基本使用
根据一个属性currentTab来决定当前显示的组件,可以使用template的v-if来完成:
<template v-if="currentTab==='home'">
<div>
<home/>
</div>
</template>
<template v-else-if="currentTab==='about'">
<div>
<about/>
</div>
</template>
<template v-else>
<div>
<category/>
</div>
</template>
也可以使用动态组件完成。动态组件是component标签,有一个属性is,用于决定当前动态显示的组件:
<component :is="currentTab"></component>
is属性后面的内容必须是:is属性需要的内容:component函数全局注册的组件;或当前app的components局部注册的组件。
动态组件的传递参数
动态组件的传递参数和普通组件类似,同样是在组件内部定义props表明需要使用的参数,定义emits表明需要触发的事件;在动态组件中用同样的方式传入参数与回调的方法。
// Home.vue
<template>
<div @click="divClick">
Home 组件 {{name}} - {{age}}
</div>
</template>
<script>
export default {
props:{
name:{
type:String,
default:""
},
age:{
type:Number,
default:0
}
},
emits:["pageClick"],
methods: {
divClick(){
this.$emit("pageClick");
}
},
}
</script>
// App.vue
<component :is="currentTab"
name="sk"
:age="18"
@pageClick="pageClick"></component>