第十八篇 Mixins - 混入使用

最新推荐文章于 2024-01-06 23:34:18 发布

灵魂学者

最新推荐文章于 2024-01-06 23:34:18 发布

阅读量766

点赞数 1

分类专栏： Vue 笔记相关文章标签： vue.js 前端框架 html javascript 前端 1024程序员节

本文链接：https://blog.csdn.net/weixin_52203618/article/details/127472317

版权

Vue 笔记相关专栏收录该内容

56 篇文章 14 订阅

订阅专栏

mixins (混入) 是一种分发Vue组件中可以复用功能，是一种非常灵活的方式，混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项；暂时还没有到使用项目的时候，先进行对 mixins 一个基本的使用和掌握。

Mixins

下面我们做一个简单的事件处理；用button按钮，点击的时候触发事件；那么就是button绑定一个handleClick的点击事件，紧接着在methods当中来完成相应的事件处理；如下：

<div id="app">
    <button type="button" @click="handleClick">点击</button>
</div>
<script>
    new Vue({
        el:'#app',
        methods:{
            handleClick(){
                console.log('---click---')
            }
        }
    })
</script>

那么现在是将这个handleClick的方法分别也让其他页面去使用它，那么handleClick就应该外边来，然后在methods中去用这个方法；如下：

<div id="app">
    <button type="button" @click="handleClick">点击</button>
</div>
<script>
    
    function handleClick(){
        console.log('---click---');
    }
    
    new Vue({
        el:'#app',
        methods:{
            handleClick : handleClick
        }
    })
</script>

上述代码可以看出只要我们想让其他页面使用，写在外面即可，然后在methods去写对应的事件用就可以了，那可以将外边的结构跟里面的一样就可以，就可以不用在methods中去一个一个写handleClick : handleClick 这种，可以这样来写，如下：

<div id="app">
    <button type="button" @click="handleClick">点击</button>
</div>
<script>
    const obj = {
        methods:{
            handleClick(){
                console.log('---click---');
            }
        }
    }
    
    new Vue({
        el:'#app',
    })
</script>

那么如何去使用到 obj 当中的methods方法，就是这篇内容的主角Mixins，将obj这个对象混入去使用，在其他页面使用的时候也可以通过混入使用到obj对象当中的methods方法，在这里就不讲在项目当中的使用，后续有的话会讲，这里主要是对mixins有基本的了解和掌握就可以了，那么如何混入呢？如下：

<div id="app">
    <button type="button" @click="handleClick">点击</button>
</div>
<script>
    const obj = {
        methods:{
            handleClick(){
                console.log('---click---');
            }
        }
    }
    
    new Vue({
        el:'#app',
        mixins:[obj]   // 共用，混入obj对象
    })
</script>

以上就是对混入的一个基本掌握！

Mixins 就近原则

那么在使用 mixins 当中难免会出现什么样的问题呢？在混入的页面当中已有该方法(方法名称相同但事件处理的内容不同)，那么mixins是如何来处理的？来实践一下：

<div id="app">
    <button type="button" @click="handleClick">点击</button>
</div>
<script>
    const obj = {
        methods:{
            handleClick(){
                console.log('---执行mixins中的---');
            }
        }
    }
    
    new Vue({
        el:'#app',
        mixins:[obj],   // 共用，混入obj对象
		methods:{
			handleClick(){
				console.log('---执行自身methods中的---');	
			}
		}
    })
</script>

实践证明mixins会执行自身methods中的handleClick方法而不是执行mixins中的方法，使用mixins造成同名函数方法的时候，页面是会采用"就近原则"，它会用自身的methods，而不是mixins中的methods方法，跟自身的methods比较的亲！

Mixins - 混入 computed / data

尝试混入了methods，那么这会就有人开始想了，那么computed 计算属性的内容呢？data 中的数据呢？答案是可以混入的。

<body><div id="app">
    <button type="button" @click="handleClick">点击</button>
	<p>Mixins中的data -- userName：{{userName}}</p>
	<p>Mixins中的computed -- getInfo：{{getInfo}}</p>
</div>
<script>
    const obj = {
		data:{
			userName:'user'
		},
        methods:{
            handleClick(){
                console.log('---执行mixins中的---');
            }
        },
		computed:{
            getInfo(){
                return "admin"
            }
        }
    }
    
    new Vue({
        el:'#app',
        mixins:[obj],   // 共用，混入obj对象
		methods:{
			handleClick(){
				console.log('---执行自身methods中的---');	
			}
		}
    })
</script>

这篇的内容就到此结束了，本篇内容记录的是mixins的一个基本使用以及掌握mixins的一些基本知识点！附上官方文档： Mixins — Vue.js

灵魂学者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
第十八篇 Mixins - 混入使用

mixins (混入) 是一种分发Vue组件中可以复用功能，是一种非常灵活的方式，混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项；暂时还没有到使用项目的时候，先进行对 mixins 一个基本的使用和掌握。
复制链接

扫一扫