文档章节

Vue.js-混合

tianyawhl
 tianyawhl
发布于 2017/09/06 13:46
字数 549
阅读 13
收藏 0

基础
混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式,混合对象可以包含任意组件选项。以
组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项

<body class="">
    <div id="example">
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    //定义一个混合对象
    var myMixin = {
        created:function(){
            this.hello()
        },
        methods:{
            hello:function(){
                console.log("hello form mixin!")
            }
        }
    }
    //定义一个使用混合对象的组件
    var Component = Vue.extend({
        mixins:[myMixin]
    })
    var component = new Component();//hello form mixin!
    </script>
</body>

选项合并
当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。比如同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子之前调用

<body class="">
    <div id="example">
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    //定义一个混合对象
    var mixin={
        created:function(){
            console.log("混合对象的钩子被调用")
        }
    }
    new Vue({
        mixins:[mixin],
        created:function(){
            console.log("组件钩子被调用")
        }
    })
    </script>
</body>
// => "混合对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项,例如methods,components 和directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对

<body class="">
    <div id="example">
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    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
    </script>
</body>

注意:Vue.extend()也使用同样的策略进行合并

 

全局混合
也可以全局注册混合对象。注意使用!一旦使用全局混合对象,将会影响到所有之后创建的Vue实例。使用恰当时,可以为自定义对象注入处理逻辑

<body class="">
    <div id="example">
        
    </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.mixin({
        created:function(){
            var myOption = this.$options.myOption
            if(myOption){
                console.log(myOption);
            }
        }
    })
    new Vue({
        myOption:"hello"
    })
    </script>

谨慎使用全局混合对象,因为会影响到每个单独创建的Vue实例(包括第三方模板),大多数情况下,只应当应用于自定义选项,就像上面实例一样,
也可以将其用作Plugins以避免产生重复应用

© 著作权归作者所有

共有 人打赏支持
上一篇: Vue.js-自定义指令
下一篇: Vue.js-组件
tianyawhl
粉丝 3
博文 225
码字总数 114742
作品 0
常州
前端工程师
私信 提问
Vue CLI 3.0 正式发布,Vue.js 开发标准化工具

Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时; 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践。...

王练
08/13
17.3K
21
Vue CLI 3.0正式发布,带来多项重大更新

近日,Vue的作者尤雨溪在Medium上宣布正式发布Vue CLI 3.0,它也将为很多开发者带来期待已久的新特性。 丰富的内置功能 尤雨溪表示,Vue CLI 3.0与其他的版本完全不同,它经历了重构,目的是...

程序师
08/18
0
0
webpack + Vue + Hbuilder 打包成App,混合app开发,一个人搞定

前几年经常用到Hbuilder的开发期,那时候react, vue还没有形成趋势,项目一般采用mui UI组件库,对Hbuilder相关开发略知一二 Hybrid 混合式开发 近几年国内vue大火,公司项目采用Hybrid 混合...

sponing
07/24
0
0
Vue开发库存管理前端页面时一些小经验记录

场景是在项目中很多地方都需要用到相同的函数,例如 如果出现次数过多,会造成书写麻烦和代码复杂的情况。 解决思路:首先对函数进行抽象封装,封装后利用vue的mixin将其注入到各个vue中。 ...

前端全栈君
10/19
0
0
关于Vue.js和React.js,听听国外的开发者怎么说?

VueJS 与 ReactJS 到底怎么样如何?听听别人怎么说。 使用所有新的库和框架,很难跟上所有这些库和框架,也就是说,这就需要您决定哪些是值得花时间的。 让我们看看人们说什么: “和Vue.JS一...

马拉喀什
01/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
39分钟前
2
0
查看内存情况

jinfo:可以输出并修改运行时的java 进程的opts。 jps:与unix上的ps类似,用来显示本地的java进程,可以查看本地运行着几个java程序,并显示他们的进程号。 jstat:一个极强的监视VM内存工具。...

Canaan_
40分钟前
2
0
基于对象特征的推荐

(本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 在上一期基于协同过滤的的推荐场景中,我们介绍了如何通过PAI快速搭建一个基于协同过滤方案的推荐系统,这一节会介绍一些如何基...

阿里云官方博客
48分钟前
2
0
Ugly Number(leetcode263)

Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers whose prime factors only include 2, 3, 5. Example 1: Input: 6Output: true......

woshixin
今天
2
0
深度模型从研者 眼里的 似然估计 & Hessain 海森矩阵 & Fisher Information (费雪信息)

深度模型的训练的基本依据是最小化模型拟合数据的误差。旨在不仅知其然(如何构建和训练一个深度模型),还应知其所以然(为什么这样训练,可以做哪些优化)。我们就会发现,有很多研究者,在...

刘小米_思聪
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部