让Vue动态组件：易如反掌！

2023-11-30 00:04:22

动态组件：Vue.js中的动态 duo

在Vue.js的世界中，动态组件是展现组件灵活性的有力工具。通过使用内置指令 :is，您可以轻松实现组件的动态渲染。

首先，需要在组件中声明一个is属性，并将其值绑定到一个动态变量。

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

然后，在组件外部，使用数据绑定来更改currentView变量的值。这将导致组件动态地更新为与currentView变量值相对应的组件。

异步组件：让等待不再漫长

异步组件是Vue.js中另一种强大的组件类型，它允许您在组件加载时显示一个加载指示器，从而避免出现空白屏幕的情况。

要使用异步组件，需要使用特殊的import()函数来加载组件。

const MyComponent = () => import('./MyComponent.vue')

然后，在组件中使用asyncComponent()函数来包装组件。

export default {
  components: {
    MyComponent: asyncComponent(MyComponent)
  }
}

当组件首次加载时，它将显示一个加载指示器。当组件加载完成后，加载指示器将被组件本身替换。

实战演练：一个交互式组件示例

为了更好地理解动态组件和异步组件的使用方法，让我们通过一个交互式组件示例来巩固所学内容。

在这个示例中，我们将创建一个简单的投票应用。用户可以选择一个候选人，然后点击投票按钮来提交他们的选票。

<template>
  <div>
    <button v-for="candidate in candidates" @click="vote(candidate)">
      {{ candidate }}
    </button>
    <component :is="currentView"></component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  data() {
    return {
      candidates: ['候选人 A', '候选人 B', '候选人 C'],
      currentView: null
    }
  },
  methods: {
    vote(candidate) {
      this.currentView = 'MyComponent'
    }
  },
  components: {
    MyComponent: asyncComponent(MyComponent)
  }
}
</script>