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

yrldjsbk2024-01-16 17:51

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。