文档章节

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以避免产生重复应用

© 著作权归作者所有

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

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

王练
08/13
0
14
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.js和React.js,听听国外的开发者怎么说?

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

马拉喀什
01/05
0
0
在Vue中使用JSX的正确姿势(有福利)

姿势很重要,末尾有福利 vue-antd-ui开源了一段时间后,收到了一些反馈,尤其是Form组件上线后,很多用户对JSX的使用感到迷惑和不习惯,为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组...

zeka
06/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 入门 - 进阶篇(4)- REST访问(RestTemplate)

经常需要发送一个GET/POST请求到其他系统(REST API),通过JDK自带的HttpURLConnection、Apache HttpClient、Netty 4、OkHTTP 2/3都可以实现。 HttpClient的使用:http://rensanning.iteye.c...

onedotdot
刚刚
0
0
Wi-Fi也有版本号了!

据Solidot消息,行业组织 Wi-Fi 联盟宣布当前的版本 Wi-Fi 802.11ac 重命名为 Wi-Fi 5,而下一个版本 802.11ax 重命名为 Wi-Fi 6,之前的版本 802.11n 改名为 Wi-Fi 4。 Wi-Fi 标准之前使用单...

linux-tao
2分钟前
0
0
项目经验不丰富、技术不突出的程序员怎么打动面试官?

前言 相信不少的程序员都有过类似的困惑:如果我没有大型的项目经历,也不能靠技术征服面试官,那我要怎么才能给面试官留下一个好印象呢? 按照本人的面试经验来说,面试主要看几点:项目经验...

Mamba1
12分钟前
0
0
MyBatis 源码分析----MyBatis 整体架构概要说明

MyBatis整体架构 MyBatis的整体架构分为三层1:基础支持层,2:核心处理层,3:接口层 1:基础支持层: 1-1反射模块: 该模块对Java 原生的反射进行了良好的封装,提供了更加简洁易用的API ,...

西瓜1994
18分钟前
1
0
如何让 J2Cache 在多种编程语言环境中使用

现在的系统是越来越复杂了,不仅仅是功能复杂,系统结构也非常复杂,而且经常在一个系统里包含几种不同语言编写的子系统。例如用 JavaScript 做前端开发、用 Java/PHP 等等做后端,C/C++/Go ...

红薯
19分钟前
29
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部