Vue.js之mixins混合组件详解

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

一、Mixins的基本用法

现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:“数据发生变化”.

代码实现过程:

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
</div>

<script>
    var addLog = {
    	// 将updated钩子混入到vue实例中
        updated() {
            console.log("数据放生变化,变化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        mixins: [addLog], //混入
    })
</script>

当点击按钮时会触发混入的 addLog 中的 updated 方法。

二、mixins的调用顺序

  • 从执行的先后顺序来说,都是 混入的先执行,然后构造器里的再执行
  • data中的属性 和 methods里的方法,会覆盖构造器覆盖混入的属性和方法
  • 生命周期的钩子则会调用2遍,不会覆盖先调用混入钩子再调用构造器钩子

在上边的代码的构造器里我们也加入了updated的钩子函数:

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
</div>

<script>
    var addLog = {
        updated : function () {
            console.log("数据放生变化,变化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("构造器里的updated方法。")
        },
        mixins: [addLog], //混入
    })
</script>

三、全局混入方式

全局混入的执行顺序要前于混入和构造器里的方法。

<div id="app">
    <p>num:{{ num }}</p>
    <P><button @click="add">增加数量</button></P>
</div>

<script>
    Vue.mixin({
        updated: function () {
            console.log('我是全局被混入的');
        }
    })

    var addLog = {
        updated : function () {
            console.log("数据放生变化,变化成" + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        data: {
            num: 1
        },
        methods: {
            add: function () {
                this.num++;
            }
        },
        updated: function () {
            console.log("构造器里的updated方法。")
        },
        mixins: [addLog], //混入
    })
</script>

顺序总结:全局混入 > 局部混入 > 构造器

两个对象键名冲突时,取组件对象的键值对

当混入和组件对象中都有test方法(重名)时,最终的值取组件对象的键值对

  <div id="app">
      <p>num:{{ num }}</p>
      <P>
          <button @click="add">增加数量</button>
      </P>
  </div>

  <script>
      var addLog = {
          updated: function () {
              console.log("数据放生变化,变化成" + this.num + ".");
              this.test();
          },
          methods: {
              test: function () {
                  console.log('混入中的test')
              }
          }
      }

      var app = new Vue({
          el: '#app',
          data: {
              num: 1
          },
          methods: {
              add: function () {
                  this.num++;
              },
              test:function(){
                  console.log('组件对象中的test')
              }
          },
          mixins: [addLog], //混入
      })
</script>

到此这篇关于Vue.js之mixins混合组件详解的文章就介绍到这了,更多相关Vue.js之mixins混合内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h

  • 深入了解Vue.js 混入(mixins)

    混入 (mixins)定义了一部分可复用的方法或者计算属性.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 来看一个简单的实例: var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() }, methods: { startmix

  • 在Vue.js中使用Mixins的方法

    一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能, 但是它们之间又有足够的不同的地方, 该如何选择呢? 我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件, 然后定义足够多的props以方便区分使用场景? 这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件, 在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险, 这违反了"DRY"的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且, 迫使维护人员, 甚至是你自己,

  • Vue.js之mixins混合组件详解

    混合以一种灵活的方式为组件提供分布复用功能.混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被"混入"组件自己的选项中. 一.Mixins的基本用法 现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <div id="app"> <p>num:{{ num }}</p> <P><but

  • vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • Vue.js之$emit用法案例详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn:  例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&

  • Vue.js之render函数使用详解

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容 <div id="div1"> <child :level="1">Hello world!</child

  • vue.js入门(3)——详解组件通信

    本文介绍vue.js组件,具体如下: 5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的状态是非常糟糕的做法,因为: 1.这让父组件与子组件紧密地耦合: 2.只看父组件,很难理解父组件的状态.因为它可能被任意子组件修改!理想情况下,只有组件自己能修改它的状态. 每个Vue实例都是一个事件触发器: $on()--监听事件. $emit()--把事件沿

  • Vue.js实例方法之生命周期详解

    本文主要给大家介绍的是关于Vue.js实例方法之生命周期的相关内容,分享出来供大家参考学习,学习的朋友们下面来一起看看详细的介绍: 一.$mount()挂载方法 $mount是用来挂载扩张的.如果 Vue 实例在实例化时没有收到 el 选项,则它处于"未挂载"状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 比如我们扩张了一个全局组件,通过$mount手动的挂载到DOM上,也就生成了一个Vue实例. <div id="#ap

  • Vue.js自定义指令学习使用详解

    自定义指令 自定义指令的注册方法和组件很像,也分全局注册和局部注册,比如注册一个v-focus指令用于在<input>.<textarea>元素初始化时自动获得焦点,共有两种写法: //全局注册 Vue.directive('focus',{ //指令选项 }); //局部注册 var app = new Vue({ el: '#app', directive: { focus: { //指令选项 } } }); 自定义指令的选项是由几个钩子函数组成的,每个都是可选的. 自定义指令

  • vue如何动态加载组件详解

    目录 使用场景: 需要动态导入组件的页面 核心组件的代码: 使用场景: 总结 使用场景: 项目中需要我们根据不同的业务需求呈现不同的业务场景,如果业务类型简单还好,直接全部引入判断即可,但随着我们代码的沉积,项目将会变得很难维护,这时候我们可以使用动态引入组件的方式来避免这个问题,首先第一步实现就是,在vue中,我们如何动态引入组件? 话不多说,直接上干货 需要动态导入组件的页面 在这个页面引入我们的组件Test <template> <div> <Test :data=&q

  • Vue.js双向绑定实现原理详解

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:http://www.jb51.net/article/100819.htm 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; /

  • Vue.js路由vue-router使用方法详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

随机推荐