vue动态组件

<template>
  <div>
    <!-- 使用 component 标签和 is 属性来动态切换组件 -->
    <component :is="currentComponent"></component>

    <!-- 按钮用于切换当前显示的组件 -->
    <button @click="changeComponent('Home')">Home</button>
    <button @click="changeComponent('About')">About</button>
  </div>
</template>

<script>
// 定义两个简单的组件
const Home = {
  template: '<div>This is the Home component</div>'
}

const About = {
  template: '<div>This is the About component</div>'
}

export default {
  data() {
    return {
      // 当前要显示的组件名称
      currentComponent: 'Home'
    }
  },
  methods: {
    // 改变当前显示的组件
    changeComponent(componentName) {
      this.currentComponent = componentName
    }
  },
  components: {
    // 注册组件
    Home,
    About
  }
}
</script>

解释说明

1. <component :is="currentComponent">:

   • component 是 Vue 提供的一个内置组件，它可以根据 is 属性的值动态渲染不同的组件。currentComponent 是一个数据属性，它的值决定了当前要渲染哪个组件。

2. 按钮点击事件:

   • 点击按钮时会调用 changeComponent 方法，并传入相应的组件名称（如 'Home' 或 'About'），从而改变 currentComponent 的值，实现组件的动态切换。

3. 组件定义:

   • Home 和 About 是两个简单的组件，每个组件都有自己的模板内容。这些组件在 components 选项中注册，以便可以在模板中使用。

4. data():

   • currentComponent 是一个响应式数据属性，初始值为 'Home'，表示默认显示的是 Home 组件。

5. methods:

   • changeComponent 方法用于更新 currentComponent 的值，从而触发组件的重新渲染。

通过这种方式，你可以轻松地在不同组件之间进行动态切换。