虽然在项目中很少用到混入的使用,但还是记录一下关于vue中混入的使用。
简介:先来讲讲什么是混入吧,借用vue官方的回答就是。混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。通过阅读官方我个人结合demo的理解,就是将混入对象中的数据以及一些方法结合到组件中,可以理解为将这个两种东西融合为一体!
接下来我们通过demo来加深理解:
钩子函数的共存
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
var myMixins={//定义一个混入对象
data(){
return{
msg:"湖人总冠军!",
msg1:"Tocat tuseday!"
}
},
created(){
console.log("混入中的生命周期")
}
}
export default {
mixins: [myMixins],//将混入对象引入到组件中
data(){
return{
msg:'组件中的data',
msg2:'未退出!'
}
},
created(){
console.log("组件的生命周期函数!!")
}
}
</script>
<style lang="scss">
</style>
// 混入中的生命周期
// 组件的生命周期函数!!
通过这个demo我们会发现两者的生命周期函数都打印了。
数据对象共存:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
var myMixins={
data(){
return{
msg:"湖人总冠军!",
msg1:"Tocat tuesday,嘤嘤嘤"
}
},
created(){
console.log(this.msg1)
console.log("访问组件中的data数据:",this.msg2)
}
}
export default {
mixins: [myMixins],
data(){
return{
msg:'组件中的data',
msg2:'未退出!'
}
},
created(){
console.log("访问混入中的数据:",this.msg1)
console.log("组件的生命周期函数!!"+this.msg)
}
}
</script>
<style lang="scss">
</style>
输出:
普通方法混入:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
var myMixins={
data(){
return{
}
},
methods: {
mixin: function() {
console.log('混入中的方法')
},
mixinTwo: function () {
console.log('js好啊,js可以做前端 js可以做后端 js还可以做移动端...')
}
}
}
export default {
mixins: [myMixins],
data(){
return{
}
},
methods: {
mixin: function () {
console.log('#app!!')
}
},
mounted() {
this.mixin()
this.mixinTwo()
}
}
</script>
<style lang="scss">
</style>
效果:
通过效果图不难发现,当混入对象和组件方法键名冲突时,取组件方法
局部混入:
在是实际的项目开发中我们可以,将混入对象定义一个单独的文件,例如:
在 components 目录下创建一个mixins文件夹,并在 mixins 目录下创建一个 mixin.js 文件:
const mixin = {
data() {
return {
msg: '我曾踏足山巅,也曾跌落低谷,二者都让我受益良多'
}
},
methods: {
mixinMethod() {
console.log(this.msg+',这是mixin混入的方法')
}
}
}
export default mixin//将混入进行导出
此时就可以在需要的文件中进行导入并且通过mixins: [mixin]引入到文件中。
混入的全局引入:
<body>
<div id="app"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
Vue.mixin({
methods: {
mixinOne: function() {
console.log('mixinOne')
}
}
})
new Vue({
el: '#app',
methods: {
mixinTwo: function () {
console.log('mixinTwo')
}
},
mounted() {
this.mixinOne()
this.mixinTwo()
}
})
// mixinOne
// mixinTwo
</script>
2. 在 main.js 中写入如下代码
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.mixin({
data() {
return {
msg: '哈哈'
}
},
methods: {
mixinMethod() {
console.log(this.msg+',这是mixin混入的方法')
}
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.最后就可以在组件中直接使用:
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
}
// 哈哈,这是mixin混入的方法
</script>