vue内置动态组件component的使用

vue内置动态组件component的使用

使用场景：点击不同按钮显示不同的组件
代码如下：

<template>
  <div>
    <el-card>
      <button @click="show = 'gedan'">个单</button>
      <button @click="show = 'tuandan'">团单</button>
      <!-- component 动态组件，指的是动态切换组件的显示与隐藏 -->
      <!-- is属性的值，表示要渲染的组件的名字 -->
      <component :is="show"></component>
    </el-card>
  </div>
</template>

<script>
// 导入组件
import gedan from "./components/gd.vue";
import tuandan from "./components/td.vue";
export default {
  data() {
    return {
      // show 表示要展示的组价的名字
      show: "gedan",
    };
  },
  // 注册组件
  components: {
    gedan,
    tuandan,
  },
};
</script>

页面显示：

刚get的新知识点，随便写了一下效果加深印象，请忽略样式哈哈！