全局Mixin
即便我们应用的是一个对象而不是一个组件，生命周期函数对我们来说仍然是可用的，懂得这点很重要。我们也可以这里应用mounted()钩子函数，它将被应用于组件的生命周期上。这种工作方法真的很灵活也很强大年夜。
归并
鄙人面的┞封个例子，我们可以看到，我们不仅仅是实现了本身想要的功能，并且Mixin中的生命周期的钩子也同样是可用的。是以，当我们在组件上应用Mixin的时刻，有可能组件与Mixin中都定义了雷同的生命周期钩子，这时刻钩子的履行次序的问题凸显了出来。默认Mixin上会起首被注册，组件上的接着注册，如许我们就可以在组件中按须要重写Mixin中的语句。组件拥有最终贰言权。当产生冲突并且这个组件就不得不“决定”哪个胜出的时刻，这一点就显得特别重要，不然，所有的器械都被放在一个数组傍边履行，Mixin将要被先推入数组，其次擦?鲩件。
- //mixin
- const hi = {
- mounted() {
- console.log('hello from mixin!')
- }
- }
- //vue instance or component
- new Vue({
- el: '#app',
- mixins: [hi],
- mounted() {
- console.log('hello from Vue instance!')
- }
- });
- //Output in console
- > hello from mixin!
- > hello from Vue instance!
如不雅这两个冲突了，我们看看 Vue实例或组件是若何决定胜负的：
应用Mixin。Vue 中的Mixin对编写函数式风格的代码很有效，因为函数式编程就是经由过程削减移动的部分让代码更好懂得(引自 Michael Feathers )。Mixin许可你封装一块在应用的其他组件中都可以应用的函数。如不雅应用姿势合适，他们不会改变函数感化域外部的任何器械，是以哪怕履行多次，只如果同样的输入你老是能获得一样的值，真的很强大年夜!
- //mixin
- const hi = {
- methods: {
- sayHello: function() {
- console.log('hello from mixin!')
- }
- },
- mounted() {
- this.sayHello()
- }
- }
- //vue instance or component
- new Vue({
- el: '#app'
推荐阅读
(1)企业已经是一个数字实体，如不雅想大年夜中获益，就由本身决定。查看竽暌姑户应用的是什么设备?他们有两种或多种办法可以连接到营业体系中吗?最重要的是，企业是在做什么来许可或优化他们的经验吗?企业的用户已经>>>详细阅读
本文标题：在Vue.js中使用Mixin
地址：http://www.17bianji.com/lsqh/36223.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示