Vue框架在项目开发中如何实现组件的复用？

本文共计1657个文字，预计阅读时间需要7分钟。

目录

1.什么是动态创建组件

2.Vue.extend()

3.通过extend实现弹窗的动态创建

3.1 创建动态组件 3.2 编辑动态组件的逻辑 3.3 在main.js中引入使用 3.4 在需要的地方通过触发事件显示弹窗

目录

• 1、什么是动态创建组件
• 2、Vue.extend()
• 3、通过extend实现弹窗的动态创建
• 3.1、创建动态组件
• 3.2、编辑动态组件的逻辑
• 3.3、在main.js中引入使用
• 3.4、在需要的地方通过触发事件显示弹窗
• 3.5、效果图

vue中通过extend动态创建全局组件；

1、什么是动态创建组件

只有在触发事件的时候，才产生某组件，平时它并不存在；

2、Vue.extend()

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；其实就是一个子类构造器是Vue组件的核心api，实现思路就是使用原型继承的方法返回了Vue的子类，并且利用mergeOptions把传入组件的options和父类的options进行了合并。

extend创建的是一个组件构造器，而不是一个具体的实例；

接收一个对象（包含组件选项的对象）作为参数，需要使用new来创建实例，并且需要$mount手动挂载到一个元素上，才可以获取到这个元素的相应的信息。