vue混入mixin的使用,保证你看的明明白白!
场景描述
有些时候,我们发现有些组件部分功能代码是几乎是一样的。
这个时候,我们就可以将相同的逻辑代码抽离出来
此时我们的主角混入mixin就登场了
下面我们有a-test和b-test两个组件,点击按钮发生的逻辑是一样的。
这个时候我们就可以使用混入mixin
a-test代码如下
点我呀
我是a-test组件
学校: {{ name}}
地址: {{ sex}}
============================
b-test组件代码如下
点我呀
我是b-test组件
学生姓名: {{ name}}
学生性别: {{ sex}}
mixin.js代码
export const mixinmethods = {
// mixinmethods这个值随便你取
methods:{
openHander(){
// mixin其实就是想将相同的模块抽离出去
alert('混合')
// 可分别拿到组件中的数据
console.log(this.name);
}
}
}
![vue混入mixin的使用,保证你看的明明白白!](https://img.it610.com/image/info8/42d53e4a7af64ccaa51d1d10137879f1.png)
文章图片
在mixin中写声明周期
export const mixinmethods = {
// mixinmethods这个值随便你取
methods:{
openHander(){
// mixin其实就是想将相同的模块抽离出去
alert('混合')
// 可分别拿到组件中的数据
console.log(this.name);
}
},
// 因为这个混合在两个组件中使用,那么该声明周期就会被执行两次
mounted() {
console.log("我是混合中的生命周期")
}
}
如果混合中的数据与组件中data的数据重复,会保留data中的数据
如果组件中data数据与混合中的数据重复了,
使用data中的数据。
组件中是可以直接使用混合中的数据的。
需要注意的是:声明周期不会以谁的为主
如果你在混合总共使用了生命周期,声明周期可能是都会执行。不会以谁的为主
export const mixinmethods = {
data() {
return {
name:'lh',
sex: '男',
age:24
}
},
// mixinmethods这个值随便你取
methods:{
openHander(){
// mixin其实就是想将相同的模块抽离出去
alert('混合')
// 可分别拿到组件中的数据
console.log(this.name);
}
},
// 因为这个混合在两个组件中使用,那么该声明周期就会被执行两次
mounted() {
console.log("我是混合中的生命周期")
}
}
点我呀
我是a-test组件
学校: {{ name}}
地址: {{ sex}}
年龄是混合中的数据 {{ age}}============================
【vue混入mixin的使用,保证你看的明明白白!】
![vue混入mixin的使用,保证你看的明明白白!](https://img.it610.com/image/info8/918a5fe7922a4cac9a3002c19a1acc9d.png)
文章图片
全局混合
在main.js中全局引入,
这样vc,vm都可以得到[这样虽然是全局使用,但是会造成性能浪费]import {yourkey1,yourkey2}from "./mixn"
Vue.mixin(yourkey1)
Vue.mixin(yourkey2)这样你就可以不需要在组件中引入了。直接在组件中使用混合就行
组件中使用 mixins:[yourkey1]
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX(Vuex|VueX(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目