vue——自定义创建公共方法或变量、混入(mixins)方法
官方文档:Vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}// 2. 添加全...
·
自定义创建公共方法或变量
官方文档:
Vue.js 的插件应该有一个公开方法 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) {
// 逻辑...
}
}
我的应用:
commonFun.js 里创建方法或变量
export default {
install(Vue) {
Vue.prototype.$bus = new Vue({
data: {
a: 10
},
methods: {
add() { this.a++ }
}
})
Vue.prototype.$say = function (str) {
alert(str)
}
}
}
main.js 里引入
// 导入自己的公共方法
import commonFun from './commonFuc/commonFuc.js'
Vue.use(commonFun);
随意的组件引用
this.$bus.add()
this.$say(this.$bus.a)
混入(mixins)方法
mixins
选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在Vue.extend()
里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。
Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})
// => 1
// => 2
更多推荐
已为社区贡献19条内容
所有评论(0)