在那些网站可以接兼职做,做网站的多钱,安丘住房建设局网站,电子商务网站搜索引擎设计Mixins
首先说明一下#xff0c;本人是前端小学生级别的菜鸡#xff0c;吐槽的话请口下留情#xff0c;在评论区指出错误或者补充不足#xff0c;我会很喜欢#xff0c;互喷不会进步#xff0c;相互指点才会。。。。谢谢大家啦
目录
Mixins 目录局部混入全局混入选项合…Mixins
首先说明一下本人是前端小学生级别的菜鸡吐槽的话请口下留情在评论区指出错误或者补充不足我会很喜欢互喷不会进步相互指点才会。。。。谢谢大家啦
目录
Mixins 目录局部混入全局混入选项合并自定义选项合并策略 适用于在多个组件之间共享可复用的逻辑主要解决代码复用问题。适合与组件生命周期、方法和数据相关的逻辑复用。可以囊括所有的Vue实力配置项。plugin比它还要大但是是直接全局的而且不仅可以囊括配置项还能有各种插件等。 局部混入 混入 (mixin) 提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。公共配置的抽离 //mixins
export const hunhe {methods: {showName() {alert(this.name)}},mounted() {console.log(你好啊)},
}
export const hunhe2 {data() {return {x: 100,y: 200}},
}//Student组件
templatedivh2 clickshowName学生姓名{{ name }}/h2h2学生性别{{ sex }}/h2/div
/templatescript
import { hunhe, hunhe2 } from ../mixinexport default {name: Student,data() {return {name: 张三,sex: 男}},mixins: [hunhe, hunhe2]
}
/script//School组件
templatedivh2 clickshowName学校名称{{ name }}/h2h2学校地址{{ address }}/h2/div
/templatescript
//引入一个hunhe
import {hunhe,hunhe2} from ../mixinexport default {name: School,data() {return {name: 清华大学,address: 北京,x: 666}},mixins:[hunhe,hunhe2],
}
/script
全局混入 混入也可以进行全局注册。使用时格外小心一旦使用全局混入它将影响每一个之后创建的 Vue 实例。使用恰当时这可以用来为自定义选项注入处理逻辑。你写到的使用地方都会使用 //main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vueimport {hunhe,hunhe2} from ./mixin
//关闭Vue的生产提示
Vue.config.productionTip falseVue.mixin(hunhe)
Vue.mixin(hunhe2)//创建vm
new Vue({el:#app,render: h h(App)
}) 请谨慎使用全局混入因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下只应当应用于自定义选项就像上面示例一样。推荐将其作为插件发布以避免重复应用混入。 选项合并 当组件和混入对象含有同名选项时这些选项将以恰当的方式进行“合并”。以你组件里写的为主,混合的为辅 比如数据对象在内部会进行递归合并并在发生冲突时以组件数据优先。 var mixin {data: function () {return {message: hello,foo: abc}}
}new Vue({mixins: [mixin],data: function () {return {message: goodbye,bar: def}},created: function () {console.log(this.$data)// { message: goodbye, foo: abc, bar: def }}
})同名钩子函数将合并为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用。 var mixin {created: function () {console.log(混入对象的钩子被调用)}
}new Vue({mixins: [mixin],created: function () {console.log(组件钩子被调用)}
})// 混入对象的钩子被调用
// 组件钩子被调用值为对象的选项例如 methods、components 和 directives将被合并为同一个对象。两个对象键名冲突时取组件对象的键值对。 var mixin {methods: {foo: function () {console.log(foo)},conflicting: function () {console.log(from mixin)}}
}var vm new Vue({mixins: [mixin],methods: {bar: function () {console.log(bar)},conflicting: function () {console.log(from self)}}
})vm.foo() // foo
vm.bar() // bar
vm.conflicting() // from self注意Vue.extend() 也使用同样的策略进行合并。 自定义选项合并策略
自定义选项将使用默认策略即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并可以向 Vue.config.optionMergeStrategies 添加一个函数
Vue.config.optionMergeStrategies.myOption function (toVal, fromVal) {// 返回合并后的值
}对于多数值为对象的选项可以使用与 methods 相同的合并策略
var strategies Vue.config.optionMergeStrategies
strategies.myOption strategies.methods可以在 Vuex 1.x 的混入策略里找到一个更高级的例子
const merge Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex function (toVal, fromVal) {if (!toVal) return fromValif (!fromVal) return toValreturn {getters: merge(toVal.getters, fromVal.getters),state: merge(toVal.state, fromVal.state),actions: merge(toVal.actions, fromVal.actions)}
}
