vue.mixin
阅读数:74 评论数: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>
相关推荐
1、安装依赖
npm install svg-sprite-loader --save-dev
2、配置build文件夹中的webpack.base.conf.js
3、在src/component
在列表渲染时使用key属性
当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略,如果数据项的顺序被改变,Vue将不会移动D
一、vue.js devtools开发工具的使用
1、安装
在chrome或firefox浏览器的扩展插件仓库里搜索vue devtool。
2、debugger的使用
假设我们想调试App.vue这
ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向组件实例。
<!-- `vm.$
在使用Vue中经常看到HTML中有标签属性前面添加了“:”,有些没有。
其实是v-bind的缩写。
v-bind
缩写: ‘:’
用法:动态绑定一个或多个特性,或一个组件prop到表达式。在绑定cl
一、概述
Vuex是一个专门为Vue.js应用程序开发的全局状态管理功能。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。
每一个Vuex应用的核心就是s