vue2中动态组件、命令式组件和插槽有啥区别？

辰九九
400 阅读6分钟

准备工作

我的 vue 版本为：

 "vue": "^2.5.2"

动态组件

概念

动态组件顾名思义可以动态切换组件，允许我们根据不同的条件渲染不同的组件，通过 Vue 的 <component> 元素和特殊的 is attribute 实现

 <!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

其中 is 的取值可以是：

  • 被注册的组件名
  • 导入的组件对象

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载

实践

脚手架新建一个 vue2 项目后，我们新建一个 DynamicCom 组件，然后修改 router 配置

image.png

页面重新渲染

image.png

新建 3 个子组件

image.png

修改 DynamicCom.vue 文件代码，实现动态组件

<template>
    <div class="">
        <h1>this is a DynamicCom</h1>
        <button
            v-for="tab in tabs"
            :key="tab"
            class="btn"
            @click="handleSwitchCom(tab)"
        >
            {{ tab }}
        </button>
        <!-- currentTab 改变时组件也改变 -->
        <component :is="currentTab"></component>
        <div>当前活跃按钮{{ currActiveBtn }}</div>
    </div>
</template>
<script>
import NineOne from '../components/NineOne.vue'
import NineTwo from '../components/NineTwo.vue'
import NineThree from '../components/NineThree.vue'
export default {
    components: {
        NineOne,
        NineTwo,
        NineThree
    },
    data() {
        return {
            // tabs内元素为按需渲染的组件名
            tabs: ['NineOne', 'NineTwo', 'NineThree'],
            currentTab: 'NineOne', // 当前活跃组件名
            currActiveBtn: 'NineOne'
        }
    },
    methods: {
        handleSwitchCom(tab) {
            this.currentTab = tab; // 切换组件
            this.currActiveBtn = tab;
        }
    }
}
</script>

当我们切换按钮时，可以看到对应的组件也被渲染，其中关键代码就是 component 标签的应用，以上即是一个简单的动态组件

image.png

命令式组件

概念

对于我们所熟知的弹窗组件而言，基本实现思路是父组件向子组件传参，点击关闭/确定按钮时通过 emit 回传事件供父组件调用，这种方式代码复用性差、使用频繁时需要定义多份 isVisible、handleSubmit 代码，造成代码冗余

所以，命令式组件被发明了，我们将功能封装在组件内部，并通过命令式的方式去调用。组件负责封装一定的功能逻辑，提供一组接口或方法。

我们经常使用的 this.$Message 就是一个典型的例子，类似于调用函数的 api ，就能轻松实现组件的渲染

 this.$Message({
     message: 'thie is a message',
     type: 'warn'
 });

实践

我们在 comopnents 目录下新建 message 文件夹用于编写自定义 message 组件，然后在 views 中新增 CommandCom.vue 文件用于使用 message 组件

代码结构如下

image.png

CommandCom.vue 代码如下

<template>
    <div>
        <button
            style="font-size: 30px;"
            @click="open"
        >click me</button>
    </div>
</template>
<script>
import $message from '../components/message';
export default {
    methods: {
        open() {
            /* 1、引入组件的方式使用 2、直接通过this调用 */
            $message();
            // 想要直接通过this调用该方法，需要保存Vue实例，注册install方法，将该函数挂载到Vue根实例原型，再全局引入
            this._Message();
        },
    },
};
</script>

message 组件的 js 代码

import Main from './main.vue';
import Vue from 'vue'
function message(
    message = '我是一条消息!',
    title = '标题',
    options = {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
    }
) {
  return new Promise((resolve, reject) => {
      // 使用extend将组件转为构造函数
      const MessageBox = Vue.extend(Main); // 生成一个新的带有默认参数的Vue的子类
      // 实例化MessageBox组件
      const messageBox = new MessageBox({
          data() {
              return {
                message,
                title,
                options,
                messageBoxVisible: true,
              };
          },
          methods: {
              resolve,
              reject,
          },
      });
      // 调用$mount()不传递参数 触发模板编译流程
      messageBox.$mount(); // 用于手动挂载，触发Vue的编译流程
      // 通过messageBox实例的$el属性获取到真实DOM，挂载到页面
      document.body.appendChild(messageBox.$el);
  });
}
message.install = function () {
    //挂载到原型
    Vue.prototype._Message = this;
};
export default message;

message 组件的 vue 代码

<template>
    <div
        v-if="messageBoxVisible"
        class="message-box"
    >
        <div>
            <div>
                <span>{{ title }}</span>
            </div>
        </div>
        <div>{{ message }}</div>
        <div>
            <button @click="cancel">
                {{ options.confirmButtonText }}
            </button>
            <button @click="confirm">
                {{ options.cancelButtonText }}
            </button>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        hide() {
            this.messageBoxVisible = false;
            this.$nextTick(() => this.$destroy());
        },
        cancel() {
            this.reject();
            this.hide();
        },
        confirm() {
            this.resolve();
            this.hide();
        },
    },
};
</script>
<style>
.message-box {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    box-shadow: 10px;
}
</style>

点击按钮后，下方出现提示内容，点击「确定」或「取消」能够关闭提示

此时内容非常简洁，没有任何样式，如果是完整的 message，我们还需要实现 message 淡入淡出的效果，以及 message 上标题、内容和按钮的样式（本篇只关注功能，对于样式不做过多说明）

image.png

值得注意的是，如果我们想要直接使用 this 调用组件，需要在 router 中添加 2 行代码

image.png

我们的 message 是一个函数，为了使用 Vue.use()，我们需要为其注册一个 install 方法，将自定义的 message 实例挂载到 Vue 原型上

image.png

message.install = function () {
    //挂载到原型
    Vue.prototype._Message = this;
};

总结：命令式组件的基本实现原理在于利用Vue.extend方法创建一个具备默认参数的Vue子类， 将自定义组件转为构造函数，然后实例化组件，传入我们的数据配置对象，再调用$mount()方法手动挂载组件，进而触发 Vue 的编译流程

同时，为了直接使用 this 调用组件，我们定义了组件的 install 方法，将 message 函数挂载到了 Vue 的原型上

插槽

概念

vue2 中，我们可以使用 元素创建一个插槽，这允许我们的组件接收任意内容

实践

新建父组件 SlotCom.vue 文件

<template>
    <div>
        <nine-four>
            <p>我是放进插槽的内容</p>
        </nine-four>
    </div>
</template>
<script>
import NineFour from './NineFour.vue';
export default {
    components: {
        NineFour,
    },
};
</script>

新建子组件 NineFour.vue 文件

<template>
    <div class="my-component">
        <h2>我是插槽组件的标题</h2>
        <!-- 这是一个插槽 -->
        <slot></slot>
    </div>
</template>
<script>
export default {
};
</script>

效果如图，在使用子组件的同时，我们可以额外添加元素渲染

image.png

更加深入的用法可以参考官网文档 v2.cn.vuejs.org/v2/guide/co…

异同

相同点

  1. 用于组件交互和渲染
  2. 代码更加灵活

不同点：

  1. 插槽（Slot） ：
    • 插槽是一种内容分发机制，允许父组件向子组件传递内容并渲染
    • 插槽是声明式的方式，通过在组件模板中使用 <slot> 标签来定义插槽的位置和默认内容
    • 插槽是静态的，父组件在渲染子组件时可以在模板中传递内容到插槽
  1. 命令式组件：
    • 命令式组件通过调用组件的构造函数或工厂函数来创建组件实例，并手动挂载到指定的 DOM 元素上
  1. 动态组件：
    • 动态组件允许我们在父组件中动态地切换不同子组件
    • 动态组件通过在父组件的模板中使用 <component> 标签，并绑定动态的组件名
    • 动态组件允许根据某些条件动态地切换子组件

应用场景：

  • 插槽（Slot） ：适用于需要将父组件的内容传递给子组件并在特定位置展示的场景，例如在布局组件中传递不同的内容到插槽中
  • 命令式组件：适用于需要在特定条件下动态创建并显示组件的场景，例如在弹出框、提示框或下拉框等需要手动触发显示的情况
  • 动态组件：适用于需要根据条件或事件动态切换显示不同子组件的场景，例如在标签页切换、路由导航等需要动态加载不同组件的情况

写在最后

插槽、命令式组件和动态组件是 Vue 中常用的组件交互和渲染方式，它们各有千秋，在不同的场景下有着各自的应用， 我们可以根据具体需求选择合适的方式实现组件的交互和显示

参考

avatar
文章
阅读
粉丝