【Vue】Vue中mixins的使用方法及实际项目应用详解
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
文章目录
1mixin基础
官网解释Vue2.x
混入mixin提供了一种非常灵活的方式来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。
如何理解mixins我们可以将mixins理解成一个数组数组中有单或多个mixinmixin的本质就是一个JS对象它可以有data、created、methods等等vue实例中拥有的所有属性甚至可以在mixins中再次嵌套mixins。
2mixin特点
1.选项合并
官网解释Vue2.x
当组件和混入对象含有同名选项时这些选项将以恰当的方式进行‘合并’。
比如数据对象在内部会进行递归合并并在发生冲突时以组件数据优先。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习mixins的简单使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="my-app">{{message}}</div>
<script type="text/javascript">
const myMixin = {
data() {
return {
message: 'this is mixin message'
}
},
created() {
console.log('mixin created')
}
}
new Vue({
el: ".my-app",
mixins: [myMixin],
data() {
return {
message: '简单的vue'
}
},
created() {
console.log(this.message)
}
})
</script>
</body>
</html>
界面
mixins与Vue instance合并时会将created等钩子函数合并成数组mixins的钩子优先调用当data、methods对象健值冲突时以组件优先。
同名钩子函数将合并为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项例如 methods、components 和 directives将被合并为同一个对象。两个对象键名冲突时取组件对象的键值对。
2.方法和参数在各组件中不共享
简述对于一个混合对象而言如果在不同的组件中以组件1和组件2为例使用数据如果组件1对mixin中的值改变不会影响组件2中引用的mixin的data。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习mixins的简单使用1</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="my-app">{{message}}</div>
<div class="my-app1">{{message}}</div>
<script type="text/javascript">
const myMixin = {
data() {
return {
message: 'this is mixin message',
age: '18',
}
},
created() {
console.log('mixin created')
}
}
new Vue({
el: ".my-app",
mixins: [myMixin],
data() {
return {
message: '简单的vue'
}
},
created() {
this.age++;
console.log('第一次引用mixin——————' + this.age)//19
}
})
new Vue({
el: ".my-app1",
mixins: [myMixin],
data() {
return {
message: '简单的vue'
}
},
created() {
console.log(this.message)
console.log('第二次引用mixin——————' + this.age)//18
}
})
</script>
</body>
</html>
3mixin与vuex的区别
vuex
状态管理
里面定义的变量在每个组件中均可以进行使用和修改在任一组件中修改此变量的值之后其他组件中此变量的值也会随之改变。
mixins:
可以定义共用的变量
在每个组件中使用引入组件之后各个变量是相互独立的值的修改在组件中不会相互影响
4mixin与公共组件的区别
组件 在父组件中引入组件相当于在父组件中给出独立的一片空间来供子组件使用父子组件中根据props和$emit来互相传值实际上两者是相互独立的
mixins:在引入组件之后与组件中的对象与方法进行合并相当于扩展了父组件中的对象和方法形成了一个新的组件。
5项目实践
在vue项目中使用element-ui时比如在使用Table表格的时候免不了申明tableData、total、pageSize等一些Table表格、Pagination分页需要的参数。
可以将重复的data和methods写入一个tableMixin中。
export default {
data() {
return {
total: 0,
pageNo: 1,
pageSize: 10,
tableData: [],
loading: false
}
},
created() {
this.searchData()
},
methods: {
// 预申明防止报错
searchData() {},
handleSizeChange(size) {
this.pageSize = size
this.searchData()
},
handleCurrentChange(page) {
this.pageNo = page
this.searchData()
},
handleSearchData() {
this.pageNo = 1
this.searchData()
}
}
}
当需要的时候直接引入即可
import tableMixin from './tableMixin'
export default {
...//引入mixins
mixins: [tableMixin],
methods: {
searchData() {
...
}
}
}
我们在组件内会重新申明serchData方法类似这种methods对象形式的key如果key相同组件内的key会覆盖tableMixin中的key。
当然我们还可以在mixins嵌套mixins。
6总结
注意一下 vue 中 mixins 的优先级component > mixins > extends。
我们暂且将 mixins 称作是组件模块化灵活运用组件模块化可以将组件内的重复代码提取出来实现代码复用也使我们的代码更加清晰效率也大大提高。
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |