js组件可复用性的混合，Vue中的混入的使用

By admin在 上张贴Cat Web前端发表回复

然后你可以在模板中任何元素上使用新的 v-focus 属性：

选项合并

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

// 首先,定义一个混合对象
var mymixin = {
  data:function(){
    return {msg:false}
  },
  methods:{
    show:function(){
      this.msg=true
    },
    hide:function(){
      this.msg=false
    },
    msgf:function(){
      this.msg=!this.msg
    }
  }
}
var tpl1={
  template:'#stpl1',
  minins:[mymixin]
}
var tpl2={
  template:'#stpl2',
  minins:[mymixin]
}
// 如果我们需要在第一个组件定义data为true时,我们可以直接在组件内定义,他会覆盖mixin的data
var tpl1={
  template:'#stpl1',
  minins:[mymixin],
  data:function(){
    msg:true
  }
}

例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新，或者使用的都是一个方法的时候，我们就可以使用vue
mixins进行封装调用，以及继承，具体看代码。

duang —
一个小而简单的:chestnut:让我们知道了Mixins对于封装一些可复用的功能如此有趣、方便、实用。

除了默认设置的核心指令( v-model 和 v-show ),Vue
也允许注册自定义指令。注意，在 Vue2.0
里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯
DOM 元素进行底层操作,这时候就会用到自定义指令。

全局混入

这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件,
在需求变化(功能变化)时, 可能会增加需要同时修改两个组件的风险,
这违反了”DRY”的前提. 另一方面, 太多的props很快会让人变得凌乱, 并且,
迫使维护人员, 甚至是你自己, 要首先理解这些props的上下文才能使用它,
这会让人非常失望.

<input v-focus>

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

demo地址： 

directives: {
 focus: {
  // 指令的定义---
 }
}

您可能感兴趣的文章:

  • Vue使用mixins实现压缩图片代码
  • vue的mixins属性详解
  • 详解Vue 中 extend 、component 、mixins 、extends
    的区别
  • 详解vue
    mixins和extends的巧妙用法
  • 详解Vue.js Mixins
    混入使用
  • 在Vue.js中使用Mixins的方法
  • vue
    mixins组件复用的几种方式（小结）

认识Mixins

例如:

注意以下三点： 

//modal
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

//tooltip
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

使用场景：

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

const Modal = {
 template: '#modal',
 mixins: [toggle]
};

const Tooltip = {
 template: '#tooltip',
 mixins: [toggle]
};

var tpl1={
  template:'#stpl1',
  data:function(){
    return {msg:false}
  },
  methods:{
    msgf:function(){
      this.msg=!this.msg
    }
  }
}
var tpl2={
  template:'#stpl2',
  data:function(){
    return {msg:false}
  },
  methods:{
    show:function(){
      this.msg=true
    },
    hide:function(){
      this.msg=false
    }
  }
}
new Vue({
  el:'#box',
  components:{
    tpla:tpl1,
    tplb:tpl2,
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Vue的Mixins是非常实用的编程方式,
因为最终实用的编程是通过不断减少运动部件(moving
parts)使代码变得容易理解. (关于这一点, Michael
Feathers有一个很好的引用). 一个mixin允许你封装一个功能,
以便你能在整个应用程序中的不同组件中使用它. 如果mixin被正确的创建,
它们是纯粹的–它们不会修改或更改函数的作用范围(scope)之外的内容, 因此,
您可以在多个地方执行它们, 并且只要输入值相同,
总是能非常可靠得得到相同的结果. 这真的非常强大.

也可以注册局部指令，组件中接受一个 directives 的选项：

2、同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

我们可以从中提取逻辑, 并创建可以复用的部分：

自定义指令 

      var mixin = {
        data: function () {
        return {
         message: 'hello'
        }
       },
       created:function(){
        console.log('我是mixins中的created')
       },
       methods:{
        show:function(num){
          console.log(num) //mixins种的函数可以接收组件种的传参。
        },
        foo: function () {
         console.log('foo')
        },
        conflicting: function () {
         console.log('from mixin')
        }
       }
      }

      var vm = new Vue({
       mixins: [mixin],
       data: function () {
        return {
         title: 'def',
         message: 'goodbye'
        }
       },
       created: function () {
        console.log('我是Vue中的created')
        console.log(this.$data)
        this.show(50); //可通过函数传参,把组件中需要的参数传给mixins进行使用。
       },
       methods:{
        bar: function () {
         console.log('bar')
        },
        conflicting: function () {
         console.log('from self')
        }
       }
      })

      vm.foo() // => "foo"
      vm.bar() // => "bar"
      vm.conflicting() // => "from self"

假设我们有一些不同的组件, 它们的工作是切换状态boolean,
一个模态(modal)和一个提示(tooltip).
这些tooltips和modals没有很多共同之处, 除了这个功能: 它们看起来不一样,
它们使用起来也不尽相同, 但是它们的逻辑是相似的 .

您可能感兴趣的文章:

  • 详解Vue.js Mixins
    混入使用
  • 在Vue.js中使用Mixins的方法
  • vue
    mixins组件复用的几种方式（小结）
  • 谈谈vue中mixin的一点理解

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

一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能,
但是它们之间又有足够的不同的地方, 该如何选择呢?
我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件,
然后定义足够多的props以方便区分使用场景?

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

//为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

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

1、当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。比如，数据对象在内部会进行浅合并
(一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

栗子

混合是什么

您可能感兴趣的文章:

  • 详解Vue.js Mixins
    混入使用
  • 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
  • vue
    mixins组件复用的几种方式（小结）
  • 谈谈vue中mixin的一点理解

我们会发现,两个组件中的数据大多数相同,这是我们可以将它们进行混合