使用动态组件: 和传统组件绑定一样 都需要先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>