准备工作
我的 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 代码如下
<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 代码
{{ title }}
{{ message }}
<script>
export default {
methods: {
hide() {
this.messageBoxVisible = false;
this.$nextTick(() => this.$destroy());
},
cancel() {
this.reject();
this.hide();
},
confirm() {
this.resolve();
this.hide();
},
},
};
</script>
点击按钮后，下方出现提示内容，点击「确定」或「取消」能够关闭提示 此时内容非常简洁，没有任何样式，如果是完整的 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 文件
我是放进插槽的内容
<script>
import NineFour from './NineFour.vue';
export default {
components: {
NineFour,
},
};
</script>新建子组件 NineFour.vue 文件
我是插槽组件的标题
效果如图，在使用子组件的同时，我们可以额外添加元素渲染
添加图片注释，不超过 140 字（可选）
更加深入的用法可以参考官网文档
【腾讯文档】资料获取方式！！
资料获取方式！！
异同 相同点
- 用于组件交互和渲染
- 代码更加灵活
不同点：
- 插槽（Slot） ：
- 插槽是一种内容分发机制，允许父组件向子组件传递内容并渲染
- 插槽是声明式的方式，通过在组件模板中使用
标签来定义插槽的位置和默认内容 - 插槽是静态的，父组件在渲染子组件时可以在模板中传递内容到插槽
- 命令式组件：
- 命令式组件通过调用组件的构造函数或工厂函数来创建组件实例，并手动挂载到指定的 DOM 元素上
- 动态组件：
- 动态组件允许我们在父组件中动态地切换不同子组件
- 动态组件通过在父组件的模板中使用
标签，并绑定动态的组件名 - 动态组件允许根据某些条件动态地切换子组件
应用场景：
- 插槽（Slot） ：适用于需要将父组件的内容传递给子组件并在特定位置展示的场景，例如在布局组件中传递不同的内容到插槽中
- 命令式组件：适用于需要在特定条件下动态创建并显示组件的场景，例如在弹出框、提示框或下拉框等需要手动触发显示的情况
- 动态组件：适用于需要根据条件或事件动态切换显示不同子组件的场景，例如在标签页切换、路由导航等需要动态加载不同组件的情况
写在最后 插槽、命令式组件和动态组件是 Vue 中常用的组件交互和渲染方式，它们各有千秋，在不同的场景下有着各自的应用， 我们可以根据具体需求选择合适的方式实现组件的交互和显示