vue怎么使用Vue.extend创建全局toast组件(toast,vue,vue.extend,开发技术)

src -> components -> Toast -> toast.vue

src -> components -> Toast -> index.js

main.js

使用

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

一般，我们会用 Vue.extend 接收一个组件对象来创建一个构造器，再利用创建的构造器 new 一个实例，并将这个实例挂载到一个元素上。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

结果如下：

<p>Walter White aka Heisenberg</p>

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。

但是在一些独立组件开发场景中，例如要实现一个类似于 window.alert() 提示组件，要求像调用 JS 函数一样调用它，这时候 Vue.extend + $mount 这对组合就是我们需要去关注的。

1、vue $mount 和 el的区别说明

在应用之前我们先了解一下2个东西 &mdash;&mdash; $mount 和 el，两者在使用效果上没有任何区别，都是为了将实例化后的vue挂载到指定的dom元素中。

如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。

注：如果$mount没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。

2、Vue.extend实现Loading插件（$mount）

3、Vue.extend实现信息弹窗插件（el）

新建一个popBox.vue

新建一个popBox.js

页面使用

其他