vue前端开发自学基础,动态切换组件的显示

vue前端开发自学基础,动态切换组件的显示！这个是需要借助于，一个官方提供的标签，名字叫【Component】-[代码demo:<component :is="ComponetShow"></component>]。

下面看看代码详情。

<template><h3>动态切换组件的显示</h3><!-- <ComA></ComA> --><component :is="ComponetShow"></component><button @click="changeShow">切换组件显示</button>
</template>
<script>
import ComA from './components/ComA.vue';
import ComB from './components/ComB.vue';export default{data(){return{ComponetShow:"ComA"}},components:{ComA,ComB},methods:{changeShow(){this.ComponetShow = this.ComponetShow == "ComA" ? "ComB":"ComA"}}}
</script>

以上是在app.vue里面写的，一个按钮，绑定点击事件，切换组件A，和组件B的显示。里面很明显，是调用了一个官方提供的标签啊。它有一个属性叫【is】。这个可以绑定一个动态值。

然后用函数就可以随意的更改这个动态值。默认情况下，我们给他赋值了。是组件A的调用。

如图，点击切换组件显示按钮后，从组件A，变成了组件B。