文档章节

Vue.js-混合

tianyawhl
 tianyawhl
发布于 2017/09/06 13:46
字数 549
阅读 11
收藏 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以避免产生重复应用

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 1
博文 200
码字总数 98515
作品 0
常州
前端工程师
Vue CLI 3.0 正式发布,Vue.js 开发标准化工具

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

王练
08/13
0
14
webpack + Vue + Hbuilder 打包成App,混合app开发,一个人搞定

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

sponing
07/24
0
0
关于Vue.js和React.js,听听国外的开发者怎么说?

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

马拉喀什
01/05
0
0
Step-by-step,打造属于自己的 Vue SSR

编者按:本文由 玩弄心里的鬼 发表于掘金,已授权奇舞周刊转载 笔者最近在和小伙伴对vue项目进行ssr的升级,本文笔者将根据一个简单拿vue cli构建的客户端渲染的demo一步一步的教大家打造自己...

奇舞周刊
04/17
0
0
Vue中使用CSS预处理器 stylus以及配置全局变量的方法

前言 不得不说CSS预处理器(Sass/Less/Stylus)极大的方便了前端研发攻城狮编写CSS样式,提供了变量定义、可嵌套的选择器、mixins混合书写、函数定义等诸多便捷的能力。 今天呢,胡哥就以stylu...

JustBeCoder
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jetbrains系产品IDEA:mac上面提示快捷键设置

原因 由于Mac上面的Ctrl+空格变成输入法切换的快捷键,在使用IDEA的过程中,代码提示很不方便,需要使用option+/这种传统eclipse上面的代码提示快捷键作为主要快捷键。 怎么修改? 移除【opt...

亚林瓜子
31分钟前
0
0
Exclipse 输出结果时换行

System.out.println(f1 + "\n" + d1 + "\n" + d2);

笑丶笑
31分钟前
1
0
怎样治疗标签不能触发onblur事件

I realize this was over a year ago, but it showed up for me in Google while trying to solve this same issue. It seems Chrome does not consider some elements, like body and ancho......

Weijuer
34分钟前
0
0
vue常见库安装

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。 安装fastclick npm insta...

林夏夕
36分钟前
0
0
kafka 教程(三) kafka Java API 编程

下午写

MrPei
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部