问答
DikT
1楼
老师我那个只能切换一次就不能切换了，我也不知道是什么原因
尚新途
组件内的data函数必须要有返回值， a和 b 都去改一下
尚新途
好了，后来我发现了，我就加上了
尚新途
ok
HXL
2楼
<template>
<div>
动态组件：
<button @click="showA">显示A</button>
<button @click="showB">显示B</button>
<component v-bind:is="currentTabComponent"></component>
</div>
</template>
<script>
import AComponent from './child/AComponent'
import BComponent from './child/BComponent'
export default {
name:'MyComponents',
data() {
return{
currentTabComponent:AComponent
}
},
components:{
AComponent,
BComponent
},
methods:{
showA(){
this.currentTabComponent = AComponent
},
showB(){
this.currentTabComponent = BComponent
}
}
}
</script>
<template>
<div>
A组件
</div>
</template>
<script>
export default {
name:'AComponent',
data() {
},
}
</script>
<template>
<div>
B组件
</div>
</template>
<script>
export default {
name:'BComponent',
data() {
},
}
</script>老师，为啥我只能切换一次，刚开始刷新的时候点b可以切换，然后再点A就不可以了
尚新途
框架的问题，你得把项目压缩提交上来才能找到问题，你重新提交一下
little_bai
3楼
<template>
<div>
<button @cilck="showA">A组件</button>
<button @click="showB">B组件</button>
<button @click="showC">kong组件</button>
<keep-alive>
<component :is="current"></component>
</keep-alive>
动态组件
</div>
</template>
<script>
import AComponent from "./child/AComponent";
import BComponent from "./child/BComponent";
export default {
name:"dongtai_components",
data(){
return{
current:AComponent,
}
},
components:{
AComponent,
BComponent,
},methods:{
showA(){
this.current=AComponent;
},
showB(){
this.current=BComponent;
},showC(){
this.current=AComponent;
}
}
}
</script>
<template>
<div>
AComponentaaa
</div>
</template>
<script>
export default {
name:"AComponent",
data(){
return{
}
}
}
</script>
<template>
<div>
BComponent
{{msg}}
<button @click="handle">改变数据</button>
</div>
</template>
<script>
export default {
name:"BComponent",
data(){
return{
msg:"原有数据"
}
},
methods:{
handle(){
this.msg="这是修改后的数据"
}
}
}
</script>老师我这个showA点击之后没效果，而且把整个showA删除之后，后面两个事件也没效果了。是怎么回事
尚新途
老师没懂你什么意思，你想要什么效果，你默认就是AComponent 组件，你点showA它还是这个组件呀。
你删掉showA的时候，删掉逗号了吗？
尚新途
删了呀
尚新途
默认是ComponentA，随着点击会切换到B，能切到B，但是再点击切换回A的时候不生效了，我又加了一个showC和showA是同样的功能；但showC能生效，showA就不能。然后我把showA删了，showB和showC就都不能生效了
尚新途
群里找你
流年岁月
4楼
<template>
<div>
A组件
</div>
</template>
<script>
export default {
name: "AComponents",
data(){
return{
}
}
}
</script>
<style scoped>
</style><template>
<div>
B组件
</div>
</template>
<script>
export default {
name: "BComponents",
data(){
return{
}
}
}
</script>
<style scoped>
</style><template>
<div>
动态组件：
<AComponents />
<BComponents />
</div>
</template>
<script>
import AComponents from './components/AComponents';
import BComponents from "./components/BComponents";
export default {
name: "APIDemo1",
data(){
return{
}
},
components: {
AComponents,
BComponents,
}
}
</script>
<style scoped>
</style>
尚新途
动态组件 是多个组件通过同一个挂载点进行组件的切换，is 的值是哪个组件的名称，那么页面就会显示哪个组件
这应该写成
<component is="AComponents"></component>
