欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

动态组件

有些时候我们的组件需要切换,这个时候用到<conponent></conponent>标签,

<component :is="choseComponent"></component>

他的:is属性指定要切换的组件字符串名.

choseComponent: "ComponentA",

示例代码

App.vue

<template>
  <component :is="choseComponent"></component>
  <button @click="changeComponent">切换组件</button>
</template>

<script>
import ComponentA from "./components/ComponentA.vue";
import ComponentB from "./components/ComponentB.vue";

export default {
  data() {
    return {
      choseComponent: "ComponentA",
    };
  },
  components: {
    ComponentA,
    ComponentB,
  },
  methods: {
    changeComponent() {
      console.log(this.choseComponent);
      this.choseComponent =
        this.choseComponent == "ComponentA" ? "ComponentB" : "ComponentA";
    },
  },
};
</script>

ComponentA.vue

<template>
  <h3>ComponentA</h3>
</template>

ComponentB.vue

<template>
  <h3>ComponentB</h3>
</template>

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』