365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

Vue: 插件

图片 1

谈到 Vue 的插件,大家会先想到怎么着呢,是极其状态管理的 Vuex 依旧发 Ajax 诉求的 axios 呢?今天就推搡 Vue 插件。你说插件有啥好聊的,直接看文书档案的 Get Started 小编就能了呀。No no no,今日想聊的是投机写插件怎么方便别人引进的标题。

咱俩先看看从前小编们是怎么引进 Element UI 的:

import Vue from 'vue';import ElementUI from 'element-ui';import App from './App.vue';Vue.use(ElementUI);import 'element-ui/lib/theme-chalk/index.css';new Vue({ el: '#app', render: h => h;

实在就两步:

  1. Vue.use
  2. 引进库的 CSS 文件:import "xxx/yyy.css

其次步轻便驾驭,那么首先步到底是咋做到的吗?在此在此以前本人都用习贯了,一贯没太介怀那么些 use 的用法是何等。

新近在写轮子的时候才意识那几个用法。因为在车轮导出的时候总不能够让开垦者去拷贝小编的 .vue 文件来用作者的车轱辘吧,所以必要一个开箱即用的引进轮子的艺术,而官方文书档案早已给出建设方案。

若是未来一度写好了四个组件 HelloWorld.vue,能够在输入文件引进,并在 install 函数使用全局注册。

// main.jsimport HelloWorld from './components/HelloWorld.vue'const XXXUI = {}XXXUI.install = function (Vue, options) { Vue.component('HelloWorld', HelloWorld)}export default XXXUI

当你打包了 main.js 后会生成 xxx.min.js 文件,别人引进插件的时候就足以那样写:

import XXXUI from 'xxxui.min.js'import Vue from 'vue'Vue.use

Vue.use 施行的时候就也正是执行写在 install 函数里的代码,也正是说此时会在开采者的品类里全局注册 HelloWorld 组件。

您还足以在 install 函数里登记其他组件,或许在 Vue 的原型上绑定变量,函数:

MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... }}export MyPlugin

终极将协和的插件 export 就足以让别的开荒者直接行使 Vue.use() 完结插件的引进了。

其实 Plugin.install = function() {} 的写法但是是将进口文件包装了一晃,暴流露叁个接口,开发者只要采纳这一个接口就能够轻巧早先化外人的库。这里的最早化也可是是大局注册XXX,绑定YYY方法到Vue原型上,本质上只是三个回调。

唯恐有人会问,那本身干脆在输入文件里全局注册不就好了,开垦者连 Vue.use 都能够不用写。可是,有希望他人不想一回全用你的组件呀,想接需加载呀。所以啊,Vue 提供的导出,引进库的方法依然很有用的。

本文由365bet亚洲版登录发布于计算机网络,转载请注明出处:Vue: 插件

您可能还会对下面的文章感兴趣: