Vue编程式插入组件(利用Vue.extend)

924 阅读1分钟

前言:

平时我们定义组件都是通过import方法导入,然后局部注册,然后使用。或者是通过全局注册的方式。

但是这两种对于复用性很高的组件,比如confirm, toast这种调用频率很高的。

看了element和iview的confirm的调用都是可以通过this.$Modal.confirm这种纯js的方式来调用,遂研究一下

实现:

我们实现一个类似iview的confirm组件。

1.组件开发

2.通过Vue.extend创建构造器

3.通过Vue.$mount挂载到目标元素(body)上

弹框长这个样子

组件开发

template: 这里我们提供了title,content和两个按钮的自定义文字

script: 可以看到我们提供了两个按钮的自定义事件,而且我们还做默认的操作

extend和mount:

extend:可以理解extend是用于创建一个组件的实例 $mount:我们通过extend实例化的时候并未提供el选项,所以可以通过手动挂载到我们想要的元素上

实现代码:

然后再main.js里加上这句:

在页面中调用:

自此 我们的自定义组件调用就完成了

完整代码: