【Vue】component 动态组件 和 is属性

component 动态组件 和 is属性

何为动态组件？

动态组件：多个组件使用同一个挂载点，并动态切换
必要条件：
组件标签使用：

<component></component>

动态绑定使用 is 特性 v-bind:is=””

<div id="main">    
    <button @click="changeCom('home')">Home</button>
    <button @click="changeCom('page')">page</button>
    <button @click="changeCom('about')">About</button>
    <component :is="variable"></component>
</div>

const vm = new Vue({
    el: "#app",
    components: {
        home: {template: `<div>home</div>`},
        page: {template: `<div>page</div>`},
        about: {template: `<div>about</div>`},
    },
    data: {
        variable: 'home'
    },
    methods: {
        changeCom(name) {
            this.variable = name
        }
    }
})

is 绑定组件的是组件name属性值，也可以绑定一个组件的构造器选项对象

<component :is="comOptions"></component>

data: {
    comOptions: {
        template: `<div>直接传入一个组件的选项对象</div>`,
    }
}

<template>
    <div class="box">
      <button @click="com='parent'">parent显示</button>
      <button @click="com = 'person'">person显示</button>
      <component :is="com"></component>
    </div>
</template>
<script>
import MyParent from './components/MyParent.vue'
import MyPerson from './components/myPerson.vue'
export default {
  components: {
    parent: MyParent,
    person: MyPerson,
  },
  data() {
    return {
      com: 'person',
    }
  }
}
</script>
<style scoped>
.box {
  padding: 50px;
  background: pink;
  border: 5px solid orchid;
}
</style>