Vue动态组件

使用动态组件: 和传统组件绑定一样 都需要先import引入地址,再在components里进行加载,

不同的是:我们使用动态的data 变量 来表示引入的组件名 然后再上边引用的时候

用<component :is="currentView"></component> 标签来引入, is里边的值是可变的data参数 可通过添加事件对其进行更改

<!--模板-->
<template>
    <div name="users">
        父组件
        <hr>
        <component :is="currentView"></component>
        <Child1></Child1>
        <Child2></Child2>
        <button @click="changeZJ1">切换组件1</button>
        <button @click="changeZJ2">切换组件2</button>
    </div>
</template>

<!--行为-->
<script>

    import Child1 from "./child1.vue"
    import Child2 from "./child2.vue"

    export default {
        name: 'users',
        data () {
            return {
                currentView:"Child1"
            }
        },
        components: {
            Child1,
            Child2
        },
        methods:{
            changeZJ1(){
                this.currentView = "Child1";
            },
            changeZJ2(){
                this.currentView = "Child2";
            }
        }

    }
</script>