我的 Vue 版本信息为:
Vue中,动态组件可依据不同条件切换展示不同的组件,利用了 Vue 的 元素和特殊的 is attribute 来实现。
- is attribute 的值可以是已注册的组件名或导入的组件对象。
- 当使用 来在多个组件间切换时,被切换掉的组件会被卸载。
在 DynamicCom.vue 文件中,我们将实现动态组件的关键代码,当按钮切换时,对应的组件也会被渲染。
接着,我们来探讨命令式组件的概念。对于如弹窗组件这类常见组件而言,通常父组件向子组件传参,点击事件通过 emit 回传给父组件。但这种方式代码复用性差,当使用频繁时需定义多份 isVisible、handleSubmit 代码,造成代码冗余。命令式组件被发明,它将功能封装在组件内部,通过命令式的方式调用。
我们会在 comopnents 目录下新建 message 文件夹来编写自定义 message 组件,然后在 views 中新增 CommandCom.vue 文件来使用 message 组件。
关于代码结构与实现,我们将提供简要的描述及代码片段。
值得注意的是,若想直接使用 this 调用组件,需在 router 中添加相关代码。
命令式组件的实现原理在于利用 Vue.extend 方法创建具备默认参数的 Vue 子类。为了将自定义的 message 实例挂载到 Vue 原型上,需为其定义一个 install 方法。
接着,我们来讲解插槽(Slot)的概念。插槽是一种内容分发机制,允许父组件向子组件传递并渲染内容。通过使用 元素,我们可以创建一个插槽。
实践操作中,新建父组件 SlotCom.vue 文件及子组件 NineFour.vue 文件。在使用子组件的可以额外添加元素进行渲染。
对于插槽、命令式组件和动态组件的异同点,它们均用于组件交互和渲染,但各有特点。插槽是静态的内容分发,命令式组件通过调用函数创建并挂载组件,而动态组件则能根据条件动态切换子组件。
在不同场景下,我们可以根据需求选择合适的组件交互和渲染方式。