vue.js---利用 is 特性来切换组件

切换组件的方式比较多，可以将组件都引入，使用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>