vue2中动态组件、命令式组件和插槽有啥区别?
准备工作
我的 vue 版本为：
"vue": "^2.5.2"动态组件
概念
动态组件顾名思义可以动态切换组件，允许我们根据不同的条件渲染不同的组件，通过 Vue 的
其中 is 的取值可以是：
- 被注册的组件名
- 导入的组件对象
当使用
添加图片注释，不超过 140 字（可选）
页面重新渲染
添加图片注释，不超过 140 字（可选）
新建 3 个子组件
添加图片注释，不超过 140 字（可选）
修改DynamicCom.vue文件代码，实现动态组件
this is a DynamicCom
当我们切换按钮时，可以看到对应的组件也被渲染，其中关键代码就是component标签的应用，以上即是一个简单的动态组件
添加图片注释，不超过 140 字（可选）
命令式组件 概念 对于我们所熟知的弹窗组件而言，基本实现思路是父组件向子组件传参，点击关闭/确定按钮时通过 emit 回传事件供父组件调用，这种方式代码复用性差、使用频繁时需要定义多份 isVisible、handleSubmit 代码，造成代码冗余 所以，命令式组件被发明了，我们将功能封装在组件内部，并通过命令式的方式去调用。组件负责封装一定的功能逻辑，提供一组接口或方法。 我们经常使用的 this.$Message 就是一个典型的例子，类似于调用函数的 api ，就能轻松实现组件的渲染
this.$Message({
message: 'thie is a message',
type: 'warn'
});实践
我们在 comopnents 目录下新建 message 文件夹用于编写自定义 message 组件，然后在 views 中新增 CommandCom.vue 文件用于使用 message 组件
代码结构如下
添加图片注释，不超过 140 字（可选）
CommandCom.vue 代码如下
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 代码
{{ title }}
{{ message }}
点击按钮后，下方出现提示内容，点击「确定」或「取消」能够关闭提示 此时内容非常简洁，没有任何样式，如果是完整的 message，我们还需要实现 message 淡入淡出的效果，以及 message 上标题、内容和按钮的样式（本篇只关注功能，对于样式不做过多说明）
添加图片注释，不超过 140 字（可选）
值得注意的是，如果我们想要直接使用 this 调用组件，需要在 router 中添加 2 行代码
添加图片注释，不超过 140 字（可选）
我们的 message 是一个函数，为了使用 Vue.use()，我们需要为其注册一个install方法，将自定义的 message 实例挂载到 Vue 原型上
添加图片注释，不超过 140 字（可选）
message.install = function () {
//挂载到原型
Vue.prototype._Message = this;
};总结：命令式组件的基本实现原理在于利用Vue.extend方法创建一个具备默认参数的Vue子类， 将自定义组件转为构造函数，然后实例化组件，传入我们的数据配置对象，再调用$mount()方法手动挂载组件，进而触发 Vue 的编译流程 同时，为了直接使用 this 调用组件，我们定义了组件的 install 方法，将 message 函数挂载到了 Vue 的原型上 插槽 概念 vue2 中，我们可以使用 元素创建一个插槽，这允许我们的组件接收任意内容 实践 新建父组件 SlotCom.vue 文件
我是放进插槽的内容
新建子组件 NineFour.vue 文件
我是插槽组件的标题
效果如图，在使用子组件的同时，我们可以额外添加元素渲染
添加图片注释，不超过 140 字（可选）
更加深入的用法可以参考官网文档
【腾讯文档】资料获取方式！！
资料获取方式！！
异同 相同点
- 用于组件交互和渲染
- 代码更加灵活
不同点：
- 插槽（Slot） ：
- 插槽是一种内容分发机制，允许父组件向子组件传递内容并渲染
- 插槽是声明式的方式，通过在组件模板中使用
标签来定义插槽的位置和默认内容 - 插槽是静态的，父组件在渲染子组件时可以在模板中传递内容到插槽
- 命令式组件：
- 命令式组件通过调用组件的构造函数或工厂函数来创建组件实例，并手动挂载到指定的 DOM 元素上
- 动态组件：
- 动态组件允许我们在父组件中动态地切换不同子组件
- 动态组件通过在父组件的模板中使用
标签，并绑定动态的组件名 - 动态组件允许根据某些条件动态地切换子组件
应用场景：
- 插槽（Slot） ：适用于需要将父组件的内容传递给子组件并在特定位置展示的场景，例如在布局组件中传递不同的内容到插槽中
- 命令式组件：适用于需要在特定条件下动态创建并显示组件的场景，例如在弹出框、提示框或下拉框等需要手动触发显示的情况
- 动态组件：适用于需要根据条件或事件动态切换显示不同子组件的场景，例如在标签页切换、路由导航等需要动态加载不同组件的情况
写在最后 插槽、命令式组件和动态组件是 Vue 中常用的组件交互和渲染方式，它们各有千秋，在不同的场景下有着各自的应用， 我们可以根据具体需求选择合适的方式实现组件的交互和显示