这是我参与更文挑战的第21天，活动详情查看：更文挑战

前言

熟悉面向对象的兄弟们一定知道如何利用多态来实现不同状态的管理与方法应用

在Vue中, 组件是我们开发过程中的重要组成部分

在某些特殊的业务需求中, 也会遇到需要根据不同的类型展示不同的组件这种情况

利用v-if在笔者看来很不优雅

这时候, 动态组件的概念吸引了我的注意力

动态组件

介绍

Vue官方文档对动态组件有简单的讲解

但其中的内容太过精髓, 不容易理解

所以笔者简单对动态组件进行了总结:

使用component标签
根据绑定属性进行渲染
支持参数传递

所以, 要使用动态组件, 我们面对的需求大体如下:

接收的数据和传递的事件基本相同
内部业务逻辑对于当前页面隐藏

~~有没有发现, 这其实很像接口和它的一堆实现类?~~

动手实现

假设如下场景: 表单中的一项内容不确定, 可能为输入框也可能为数字框, 但它们样式设置等基本相同

UI我们使用ant design vue, 即实现这两种组件:

<a-input id="test" style="width: 20%" />
<a-input-number id="test" style="width: 20%" />

传统的写法:

<a-input v-if="type === 'input'" id="test" placeholder="动态输入框" style="width: 20%" />
<a-input-number v-else id="test" placeholder="动态输入框" style="width: 20%" />

使用动态路由进行替换, 全部代码:

<template>
  <div class="test">
    <component :is="type" v-bind="options"></component>
    <button @click="change">切换类型</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      types: ["a-input", "a-input-number"],
      type: "a-input",
      options: {
        id: "test",
        placeholder: "动态输入框",
        style: "width: 20%",
      },
    };
  },
  methods: {
    change() {
      this.type = this.types[this.types.indexOf(this.type) ^ 1];
    },
  }
};
</script>

<style></style>

is属性对应的为组件名称, 输入框为a-input, 数字输入框为a-input-number

通过切换is属性的值, 组件随之变化

总结

个人认为动态组件的应用很广泛, 例如动态表单, 表单定制等等

希望简陋的文章可以给没思路的兄弟们提供一些帮助

Vue动态组件初探

前言

动态组件

介绍

动手实现

总结