vue.mixin

阅读数:51 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、问题场景

在日常开发中，你是否会遇到类似的情况：有两个或者以上的相似的组件，他们有相同的功能函数，也有不同的功能函数，这种情况需要怎么操作呢？

有人会想写在一个组件内，通过不同的属性来区分不同的情况，但这时候属性一多又容易混乱。在 Vue 的官方文档中提出了是一种非常灵活的方式 mixin，如果被正确使用，可以帮助我们解决上面的困惑。

二、概述

我们可以首先定义混入对象，当组件使用了混入对象时，混入对象的所有选项将被混合进入该组件本身的选项中。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin] // 引入混入对象
})

var component = new Component() // => "hello from mixin!"

1、对于同名的生命周期的钩子函数，将会被合并为一个数组，执行会先调用混入对象的钩子函数再调用组件本身的钩子函数。

2、对于 data 对象，会进行合并，当混入对象和组件的data 中含有同名的数据时，将以组件的数据优先。

3、同样，对于 methods、components 和 directives 等这些使用健值为对象的选项，会被合并为一个对象，当混入对象和组件含有相同健名时，将保留使用组件的键值对。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      mixinData: 'abc'
    }
  }，
   created: function () {
     console.log('hello,begain use mixin')
  }，
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      barData: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", mixinData: "abc", barData: "def" }
  }
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

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

三、应用

1、不同于引用组件，父亲组件和子组件本质上还是相对独立的两块空间。只不过在父亲组件引用子组件时，父组件会开辟一个空间给予子组件，父组件与子组件之前通过props 进行数据交流。所以mixin的一个特点是父组件引入混入对象后在父组件原有基础上将父组件更新为一个新的组件。

2、

mixin 的另外一个特点是方法和参数在不同组件间是不共享的，即指向的空间是不同的。有不少同学会误认为，A 组件引入了 C 混入对象，B 组件引入了 C 混入对象，那么 A 组件中改变了 C 混入对象注入的data 属性值，B 组件中的注入的相同值也可以改变。真实的情况如下：

// 定义一个混入对象
var myMixin = {
 data: function () {
    return {
      message: 'hello',
    }
  }
}

// 定义一个使用混入对象的组件
var vm1 = new Vue({
  mixins: [myMixin],
  methods: {
    bar: function () {
      console.log(this.message)
      // => "hello"
    }
  }
})

var vm2 = new Vue({
  mixins: [myMixin],
  created: function () {
    this.message = 'fine'
  }
  methods: {
    bar: function () {
       console.log(this.message)
       // => "fine"
    }
  }
})

3、当多个组件重复调用一个方法或者一个变量时，使用 mixin 可以避免重复写相同的方法。

我们举一个很简单的例子，我们在开发后台时会经常遇到下载文件按钮，里面的部分页面（假设10个页面）有下载文件按钮，而其中部分（假设5个）页面有默认下载文件链接，另一部分页面（假设5个）有自己单独的下载文件链接。下载文件时他们的需要先判断用户的权限，权限通过才允许下载。这种时候您就可以使用mixin来解决当前的问题，不必每个页面都写一段下载逻辑。下面我们通过代码来演示一遍。

（1）首先新建文件 download.js, 定义混入对象，在混入对象中定义默认的下载链接和下载逻辑

export default {
  data () {
    return {
      downloadUrl: 'http://downloadUrl/default/'
    }
  },
  methods: {
    downloadClick: function () {
      console.log('下载链接是', this.downloadUrl)
      // 下载的业务逻辑
    }
  }
}

（2）在直接使用默认逻辑的组件中直接注入混入对象

<template>
  <div id='default'>
    <button @click="downloadClick">下载文件</button>
  </div>
</template>
<script>
import downloadButton from './download'

export default{
  name: 'default',
  mixins: [downloadButton],
}
</script>

（3）对于需要有特殊下载链接的组件，引入混入对象，并且定义自己的下载文件链接。

<template>
  <div id='myself'>
    <button @click="downloadClick">下载文件</button>
  </div>
</template>
<script>
import downloadButton from './download'

export default{
  name: 'myself',
  mixins: [downloadButton],
   data () {
    return {
      downloadUrl: 'http://downloadUrl/myself/',
      }
    }
  },
}
</script>

秒吧学习

vue.mixin

分类

正文

一、问题场景

二、概述

三、应用

相关推荐

vue2项目中使用svg图标

vue中key属性的作用

vue源代码调试方法

vue .sync修饰符

vue click.stop阻止点击事件继续传播

vue 登陆页面实现回车登陆

vue ref

Vue中的冒号变量(动态赋值v-bind)

vue .postcssrc.js

Vuex

vue.mixin

分类

正文

一、问题场景

二、概述

三、应用

相关推荐

vue2项目中使用svg图标

vue中key属性的作用

vue源代码调试方法

vue .sync修饰符

vue click.stop阻止点击事件继续传播

vue 登陆页面实现回车登陆

vue ref

Vue中的冒号变量(动态赋值v-bind)

vue .postcssrc.js

Vuex

提示信息