callback用法 js vue_Vue.extend()的基本使用和示例 vue插件

还可以参考https://www.cnblogs.com/hentai-miao/p/10271652.html

相信很多人用vuejs构建单页应用时都会用到一些全局方法，比如发ajax请求时喜欢用axios挂载到vue原型上，如下：

用的时候就直接上this.$axios

这样确实方便，不用每个用到axios的组件都去引入

类似如此，当我们要用到一些操作dom的方法时要怎么做呢，上面的例子纯属js的封装，没有涉及到dom；下面我用一个全局提示组件为例，类似element-ui的message组件为大家演示一遍如何封装一个包含操作dom的的全局组件的，步骤主要有3步：

1, 在componenets/Message 目录下新建一个Message.vue组件

2, 在componenets/Message目录准备一个index.js

上面的代码关键点就是用Vue.extend()构造出一个Vue子类实例，(注意我这里模板渲染只用到render函数，没有用template选项，因为template选项 要求装Vue时要加入模板编译器那块代码,用render函数更加简洁，只需要装运行时版本，Vue体积更加小)；然后调用$mount()方法生成需要的dom,再拿到对应的$el,实例内部自己维护插入dom和移除dom的操作，对外暴露了四个方法info、success、error、warning方便不同的场景调用；类似的组件还有confrim组件、alert组件等，大同小异。

3，在main.js中引入components/Message/index.js,以插件形式安装

最后，当你需要用的时候就直接，特别适合在ajax回调函数里面用来提示