gitHub地址: https://github.com/manlili/vue_learn里面lesson13

一 定位

混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时，混合对象的所有选项将被“混入”组件自己的选项中。

实际上,我也没搞懂这句话,先研究再说,放个一年也许就自己慢慢懂了,时间这玩意可以发酵

二 定义

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue混合--定义</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <script type="text/javascript">

            var myMinxin= {             //第一步,创建一个混合数据

                created: function () {

                    this.hello();

                },

                methods: {

                    hello: function () {

                        alert('你好');

                    }

                }

            }

            var myComponent = Vue.extend({    //将混合注册到Vue

                mixins: [myMinxin]

            })

            new myComponent();    //实例化这个混合

        </script>

    </body>

</html>

上面代码,弹出:

三 混合与Vue同名冲突

混合对象与组件包含同名选项时，这些选项将以适当的策略合并。例如，同名钩子函数被并入一个数组，因而都会被调用。另外，混合的钩子将在组件自己的钩子之前调用。

同名钩子函数冲突,代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue混合--同名冲突</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <script type="text/javascript">

            var myMinxin= {             //第一步,创建一个混合数据

                created: function () {

                    this.hello();

                },

                methods: {

                    hello: function () {

                        alert('你好');

                    }

                }

            }

            var myComponent = Vue.extend({    //注意Vue的created与minxin的created重合,这里将先执行minxin的created

                created: function () {

                    alert('我是Vue的created');

                },

                mixins: [myMinxin]

            })

            new myComponent();    //实例化这个混合

        </script>

    </body>

</html>

先弹出:

再弹出:

值为对象同名冲突,代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Vue混合--同名冲突</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <script type="text/javascript">

            var myMinxin= {             //第一步,创建一个混合数据

                created: function () {

                    this.hello();

                    this.nono();

                },

                methods: {

                    hello: function () {

                        alert('你好1');

                    },

                    nono: function () {

                        alert('nono1');

                    }

                }

            }

            var myComponent = Vue.extend({     //methods中对象冲突,只显示Vue实例中的方法

                created: function () {

                    this.hello();

                    this.nono();

                },

                mixins: [myMinxin],

                methods: {

                    hello: function () {

                        alert('你好2');

                    },

                    nono: function () {

                        alert('nono2');

                    }

                }

            })

            new myComponent();    //实例化这个混合

        </script>

    </body>

</html>

输出如下:

Vue混合的更多相关文章

  1. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  2. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  3. Vue 混合

    混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混合对象可以可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混合到该组件本身的选项. //定义一个混合对象 va ...

  4. 11、VUE混合

    1.混合的概念(mixture) 混合是以一种灵活的方式,为组件提供代码复用功能.(类似于封装) 混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中 ...

  5. Cordova+vue 混合app开发（一）创建Cordova项目

    简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...

  6. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  7. 实现一个简单的vue-router

    所有项目的源代码都放在我的github上,欢迎大家start: https://github.com/Jasonwang911/my-vue-router 首先来看下vue-router的使用: im ...

  8. 使用nodejs进行开发，concurrently模块，使我们同时执行多个命令。

    concurrently模块使用. 安装模块 npm install concurrently 配置concurrently 运行多个服务 当我们使用nodejs和vue混合开发的时候.当要同时启动后 ...

  9. vue的混合mixins学习

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

随机推荐

  1. 储物柜soket通信协议和中间件实现技术细节

    一.中间件程序的职责: 1)对柜机提供soket长连接的服务器端,就是soket server.可提供上万的客户端同时连接.用来实时响应控制请求,中间件必须随时知道某个柜机的在线状态,外部请求时才能判 ...

  2. [转] 关于hibernate的缓存使用

    http://blog.csdn.net/woshichenxu/article/details/586361 1.     关于hibernate缓存的问题: 1.1.1.         基本的缓 ...

  3. base.js

    function $_id(id){return document.getElementById(id)};//$只定义为通过ID返回元素的功能 //-----------------------do ...

  4. Android 布局之RelativeLayout

    Android 布局之RelativeLayout 1 RelativeLayout简介 RelativeLayout是相对布局. RelativeLayout布局属性 1.1 与parent相对的属 ...

  5. SQL Server 2012：SQL Server体系结构——一个查询的生命周期（第1部分）

    为了缩小读取操作所涉及范围,本文首先着眼于简单的SELECT查询,然后引入执行更新操作有关的附加过程.最后你会读到,优化性能时SQLServer使用还原工具的相关术语和流程. 关系和存储引擎 如图所示 ...

  6. python常用数据类型内置方法介绍

    熟练掌握python常用数据类型内置方法是每个初学者必须具备的内功. 下面介绍了python常用的集中数据类型及其方法,点开源代码,其中对主要方法都进行了中文注释. 一.整型 a = 100 a.xx ...

  7. 服务器唯一id生成规则

    在使用hashCode的时候,发现会出现相同id,虽然几率很小.虽然发现并不是hashCode的原因,而是其他逻辑的问题. 但是还是试着自己写了一个id生成器,有些id是int的,比如说任务id:有些 ...

  8. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  9. Parameter配置文件获取

    public class ConfigInfo { public static ParametersHelper Parameters { get { return new ParametersHel ...

  10. JavaScript一些函数

    1.prompt()函数:有两个参数,一个是显示用户输入框上面的标签,另一个是输入框的初始值.用来接收用户输入的值,然后把它返回到代码中: 例如: <doctype html> <h ...