这篇文章主要介绍“vuejs中怎么使用mixin局部混入与全局混入”，在日常操作中，相信很多人在vuejs中怎么使用mixin局部混入与全局混入问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vuejs中怎么使用mixin局部混入与全局混入”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
假设:现在有两个不同的按钮组件ButtonA,ButtonB,点击它弹出组件自身不同的属性
用Vue-cli脚手架创建一个项目,在components文件夹下分别创建ButtonA.vue,ButtonB.vue两个组件
以下是ButtonA组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义
<template>
<div class="wrap">
<button @click="handleButton">按钮组件A</button>
</div>
</template>
<script>
export default {
name: "ButtonA",
data() {
return {
name: "itclan.cn"
}
},
methods: {
handleButton() {
alert(this.name);
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
margin-right: 20px;
}
</style>以下是ButtonB组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义
<template>
<div>
<button @click="handleButton">按钮组件B</button>
</div>
</template>
<script>
export default {
name: "ButtonB",
data() {
return {
name: "video.itclan.cn"
}
},
methods: {
handleButton() {
alert(this.name);
}
}
}
</script>
<style lang="scss" scoped>
</style>然后再App.vue当中引入两个ButtonA,ButtonB组件
<template>
<div id="app">
<ButtonA></ButtonA>
<ButtonB></ButtonB>
</div>
</template>
<script>
import ButtonA from "./components/ButtonA"
import ButtonB from "./components/ButtonB"
export default {
name: 'App',
components: {
ButtonA,
ButtonB
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
justify-content: center;
}
</style>经过上面的几行代码,可以实现我们想要的目的,但是你会发现,他们的功能逻辑都是一样的,定义的方法名也都是一样的
如果一个项目里,有很多个这样的组件,只要想改,那么所有的单文件组件都得手动的修改一次,毫无疑问,重复性的代码也比较多,比较分散
对于不同组件间同样的配置,能不能提取出来共用一份呢,在Vue当中,提供了mixin
把多个组件共有的配置提取成一个混入对象,然后通过局部混入或者全局混入,以达到共用配置的目的,这就是mixin
官方文档: 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
翻译一下: 将组件的公共逻辑或者配置(包括data,方法,生命周期,甚至props等)提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易，改一处即可,不用到处去每个组件内修改配置
注意：提取的是逻辑或配置，而不是HTML代码和CSS代码。也就是说，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高
那么组件与组件之间还有重复部分，比如逻辑业务的复用,我们还可以使用Mixin在抽离一遍
以下是经过mixin改写过的
在src文件夹下创建一个mixin文件夹(这个文件夹下全部放入一些混入),创建一个popButton.js文件,创建一个对象,然后暴露出去,如下所示
export const popButton = {
// 这里面组件选项的配置都是可以的,生命周期等,data属性,计算属性,监听属性等
methods: {
handleButton() {
alert(this.name);
}
}
}然后再组件使用处引入即可,如下ButtonA组件,通过import引入,同时在组件配置选项中mixins:[引入的混入名],要是多个的话,用逗号分隔
<template>
<div class="wrap">
<button @click="handleButton">按钮组件A</button>
</div>
</template>
<script>
import {popButton} from "../mixin/popButton.js"
export default {
name: "ButtonA",
mixins: [popButton],
data() {
return {
name: "itclan.cn"
}
},
}
</script>
<style lang="scss" scoped>
.wrap {
margin-right: 20px;
}
</style>这种在组件内部,通过minxins:[混入名称],也被视为局部混入
局部混入也就是只在当前组件内起作用,与按需加载有些相似,也就是需要用到mixin中的代码时，我们再在组件内引入它
而全局混入的话，则代表我在项目的任何组件中都可以使用mixin,从根组件下至到它的任何一个组件都会用到混入
局部混入是,在需要的组件引入混入,通过import导入混入,在通过在组件的配置选项中通过minxins: [混入名称]
而全局混入,则是在项目代码中的main.js中去引入混入,在用Vue.mixin(混入名称)进行注册
这样任何一个组件,都可以使用混入了的,如下代码所示
import Vue from 'vue'
import App from './App.vue'
import {popButton} from "./mixin/popButton.js"
Vue.mixin(popButton);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')::: tip 注意事项 在使用全局混入时,应当格外小心,一旦使用全局混入,它将影响每一个之后创建的vue实例,也就是所有的vm,vc都会有混入
它与局部混入没有啥区别,虽然一次性注入混入很方便,但是也会带来一些问题,所有的组件实例,Vue实例都会有混入
在官方的特殊提示里,提到了,谨慎使用全局混入,因为它会影响每个单独创建的vue实例(包括第三方组件)
大多数情况下,只应当应用于自定义选项,就像上面示例一样,推荐将其作为插件发布,以避免重复应用混入 :::
mixin中的生命周期函数会和组件的生命周期一起合并执行
mixin中的data数据在组件中可以使用
mixin中的方法在组件内部可以直接调用
生命周期函数合并后执行顺序:先执行mixin中的,然后执行组件的
mounted不会合并,都会加载一遍
不同组件中的mixin是相互独立的,改变一个组件中mixin中的数据,另一个引用了mixin的组件不会受影响
如下代码
export const popButton = {
data() {
return {
name: "川川",
age: 18
}
},
created() {
console.log("混入生命周期开始执行");
},
mounted() {
console.log("我是混入");
},
methods: {
handleButton() {
alert(this.name);
},
handleMounted() {
console.log("加载方法");
}
}
}当组件和混入对象含有同名选项时,这些选项将以合适的方式进行合并
也就是说,当mixin中定义的数据,方法名与组件里的属性名,方法名同名时,会怎么样呢
会存在数据,和方法名的覆盖问题?谁覆盖谁?执行先后顺序是?
mixin里面可以有自己的生命周期函数，同组件一样,生命周期函数是自执行函数,在某个阶段会自动执行
它都是固定的,默认合并策略如下所示
先执行mixin中生命周期函数中的代码,然后再执行组件内部的代码
export const popButton = {
data() {
return {
name: "川川",
age: 18
}
},
beforeCreate() {
console.log("创建之前");
},
created() {
console.log("混入生命周期开始执行");
},
mounted() {
console.log("我是混入");
},
beforeUpdate() {
console.log("更新之前");
},
updated() {
console.log("更新之时");
},
beforeDestroy() {
console.log("销毁之前");
},
destroyed() {
console.log("销毁时");
},
methods: {
handleButton() {
alert(this.name);
},
handleMounted() {
console.log("加载方法");
}
}
}若是方法重名,则后者组件内的方法会覆盖mixin中的方法
当mixin中的data数据与组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据
若是没有相同的话,会进行数据的合并
export const popButton = {
data() {
return {
name: "川川",
age: 18
}
},
}在同一个项目里,起相同的名称,是很容易遇到的,如果mixin中的方法名与引入mixin中组件的方法名一致时,那么以当前组件为准
既然mixin这么好用,那为什么不直接大量推荐使用?mixin可以复用组件的逻辑,这样可以节省很多代码,但是同样,也会带来一些问题
在某些单文件组件里,引入mixin,因为组件内可以调用mixin的方法和使用mixin中定义的数据,找上下文的时候,变得不是那么直观，要么通过阅读代码逐级向上进行查找,要么就是全局进行搜索查找
使用mixin时,不利于阅读,代码变得难以维护
因为组件里可以引入多个mixin,并直接隐式的调用mixin里面的变量和方法,这会让写代码的人看着有些混乱,区分不出这些变量和方法,分别是哪个mixin的
所以这里建议是：但凡mixin的方法,统一放到mixin文件夹下进行管理的
当遇到组件中定义的属性,方法与minxin当中的出现相同时,后者组件的属性会覆盖mixin中的属性
一个组件可以引用多个mixins一个mixins也可以被多个组件引用,因为是共用逻辑,所以在关系上,不是很明确
不好追溯代码,排查问题,可以利用工具vscode全局搜索,如果是很多个地方用到了的mixin那么就得挨个的检查
如果滥用mixin的话,会让代码变得难以维护
如果是用了全局混入,在审查代码时,在任何一组件当中会莫名的多出一些属性和方法,会令新的同学很困惑,如果对mixin很熟悉的话,那没什么,如果不熟悉
那么就非常苦恼,这个变量名和方法,我在组件当中明明没有定义,但是为啥能使用呢,带来一些困惑
注意
如果一个功能,逻辑,一开始就很确定,它以后是不会动的,那么就可以使用mixin
提高组件代码复用性
无需传递状态
维护方便,只需要修改一处地方就可以,全局混入,应当谨慎使用
到此，关于“vuejs中怎么使用mixin局部混入与全局混入”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
