切换组件的方式比较多,可以将组件都引入,使用v-if来切换需要显示的组件,但是这样的写代码冗余还是比较多的,较好的方式是使用 is 特性来切换组件:
点击按钮来改变comp的值,切换子组件;
上代码,父组件:
<template>
<div class="all">
<button @click="change('dog')">组件一</button>
<button @click="change('pig')">组件二</button>
<component :is="comp"></component> // 使用is特性来切换子组件
</div>
</template>
<script>
import dog from '../components/dog' // 引入子组件
import pig from '../components/pig' // 引入子组件
export default {
data () {
return {
comp:'dog'
}
},
components:{dog,pig}, // 注册子组件
methods:{
change(val){
this.comp = val
}
}
}
</script>
<style lang='scss' scoped>
button{
width:70px;height:30px;margin-right:10px;user-select: none;
}
</style>
两个子组件:
<template>
<div style="background:blue;width:300px;height:260px;color:skyblue;">这是dog的独有场所</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style lang='scss' scoped>
</style>
<template>
<div style="background:red;width:200px;height:200px;color:skyblue;">这里是pig场所地</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style lang='scss' scoped>
</style>