vue中的mixins混入使用方法
作者:清城幻影 时间:2023-07-02 17:01:47
mixins
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
mixins理解
组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。
而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。
单纯组件引用:
父组件 + 子组件 >>> 父组件 + 子组件
mixins:
父组件 + 子组件 >>> new父组件有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。
作用:
用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术,使用这个技术我们可以把需要复用的内容封装成一个vue组件,方便下次使用方便
使用方法
首先在src中去创建一个自己的文件夹,然后把要封装的内容放入到这个文件夹,方便后续的调用
let mymixin={
methods:{
handleBtn(){
alert('封装的内容已经触发!')
}
}
}
export default mymixin
全局混入
全局混入就是我们可以把封装好的这个组件在main.js中全局注册,方便在任何地方使用
import myMixins from "./mixins/index.js"
// 全局混入
Vue.mixin(myMixins)
局部混入
也就是引用的复用内容只能在当前组件中生效
<template>
<button @click="handleBtn">点我触发</button>
</template>
<script>
import myMixins from '@/mixin.js'
export default {
mixins:[myMixins]
}
</script>
<style>
</style>
这样就实现了一个简单的混入,减少代码的复用性,大大加强了开发效率,你就可以安心的考虑业务,而不是不停的敲代码
mixins的使用
方法的复用
html
<div id="app">
<child></child>
<kid></kid>
</div>
js
Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
methods:{
foo(){
console.log('Kid foo()'+this.msg++)
}
}
})
在借助mixins之前,在两个不同的组件的组件中调用foo方法,需要重复定义,倘若方法比较复杂,代码将更加冗余。若借助mixins,则变得十分简单:
let mixin={
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('hello from mixin!----'+this.msg++)
}
}
}
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin]
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
mixins:[mixin]
})
虽然此处,两个组件用可以通过this.msg引用mixins中定义的msg,但是,小编尝试过,两个组件引用的并不是同一个msg,而是各自创建了一个新的msg。如果在组件中定义相同的data,则此处会引用组件中的msg,而非mixins中的。
方法的覆盖
如果在引用mixins的同时,在组件中重复定义相同的方法,则mixins中的方法会被覆盖。
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin],
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
此时,若单击h1标签,则在控制台中打印"Child foo() 1" 3、合并生命周期此时,若单击h1标签,则在控制台中打印"Child foo() 1"
合并生命周期
let mixin={
mounted(){
console.log('mixin say hi')//先输出
},
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('mixin foo()'+this.msg++)
}
}
}
let vm=new Vue({
el:"#app",
data:{
msg: 2
},
mounted: function(){
console.log('app say hi')//后输出
},
methods:{
foo(){
console.log('Parent foo()'+this.msg)
}
}
})
通过上面的介绍,现在对mixins有了比较深入的了解,在设计复杂组件时是很有必要的。
来源:https://blog.51cto.com/u_15451955/5249315
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python数据可视化的那些操作你了解吗
![](https://img.aspxhome.com/file/2023/8/76908_0s.png)
最基础的Python的socket编程入门教程
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
python matplotlib画图实例代码分享
![](https://img.aspxhome.com/file/2023/5/117865_0s.png)
Can''t connect to MySQL server on localhost (10061)解决方法
![](https://img.aspxhome.com/file/2023/4/65284_0s.png)
Linux系统下mysqlcheck修复数据库命令(详解)
Python编程中归并排序算法的实现步骤详解
如何使用SublimeText3配置 PHP IDE环境
![](https://img.aspxhome.com/file/2023/9/131619_0s.png)
vue实现登录拦截
![](https://img.aspxhome.com/file/2023/6/130216_0s.jpg)
Mysql通过Adjacency List(邻接表)存储树形结构
![](https://img.aspxhome.com/file/2023/8/77318_0s.png)
Python绘制交通流折线图详情
![](https://img.aspxhome.com/file/2023/2/86652_0s.png)
深度学习环境搭建anaconda+pycharm+pytorch的方法步骤
![](https://img.aspxhome.com/file/2023/7/77677_0s.png)
Python3.8 + Tkinter: Button设置image属性不显示的问题及解决方法
![](https://img.aspxhome.com/file/2023/2/95392_0s.png)
关于document.createDocumentFragment()
Python多层装饰器用法实例分析
python使用webdriver爬取微信公众号
Python利用LyScript插件实现批量打开关闭进程
![](https://img.aspxhome.com/file/2023/7/85217_0s.jpg)
vite.config.js配置入门详解
![](https://img.aspxhome.com/file/2023/9/130129_0s.jpg)
浅谈String类型如何转换为time类型存进数据库
![](https://img.aspxhome.com/file/2023/8/69358_0s.png)