vue混入(mixin)的解读
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被[混合]进入该组件本身的选项。
1.钩子函数
混入对象的钩子将在组件自身钩子之前调用。
?// ?minxin.js
const mixin = {
? data() {
? ? return{
? ? ? msg1: '我是混入内容1',
? ? ? msg2: '我是混入内容2'
? ? }
? },
? created() {
? ? console.log(this.msg3)
? }
}
export default mixin;
</script>
...
// 页面组件
<template>
? <div class="header">
? ? <h1></h1>
? </div>
</template>
<script>
import mixin from './mixins/mixin'
export default {
? mixins: [mixin],
? name: 'Header',
? data(){
? ? return{
? ? ? msg1: '我是组件内容1',
? ? ? msg3: '我是组件内容2'
? ? }
? },
? created() {
? ? ? console.log(this.msg2)
? ? ? console.log(this.msg1)
? },
}
</script>
??
?? ?// 我是组件内容2
?? ?// 我是混入内容2
?? ?// 我是组件内容1
2.普通方法合并
当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。
<body>
? ? <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
? ? var Mixins = {
? ? ? ? methods: {
? ? ? ? ? ? mixin: function() {
? ? ? ? ? ? ? ? console.log('MixinOne')
? ? ? ? ? ? },
? ? ? ? ? ? mixinTwo: function () {
? ? ? ? ? ? ? ? console.log('MixinTwo')
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? mixins: [Mixins],
? ? ? ? methods: {
? ? ? ? ? ? mixin: function () {
? ? ? ? ? ? ? ? console.log('component')
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.mixin()
? ? ? ? ? ? this.mixinTwo()
? ? ? ? }
? ? })
? ??
?? ?// component
?? ?// MixinTwo
</script>
3.局部混入
在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：
const mixin = {
? data() {
? ? return {
? ? ? msg: "hello"
? ? }
? },
? methods: {
? ? mixinMethod() {
? ? ? console.log(this.msg + ',这是mixin混入方法')
? ? }
? }
}
export default mixin;
在需要的页面中引入：
<template>
?? ?<div>{{msg}}</div>
</template>
<script>
import mixin from 'mixins/mixin'
export default {
?? ?mixins: [mixin],
? ? data() {
?? ? ? ?return {
?? ? ? ?}
? ? }
?? ?mounted() {
?? ??? ?this.mixinMethod()
?? ?}
}
// hello，这是mixin混入的方法
4.全局混入
在main.js加入以下代码
Vue.mixin({
? data() {
? ? return {
? ? ? msg: 'hello'
? ? }
? },
? methods: {
? ? mixinMethod() {
? ? ? console.log(this.msg+'，这是mixin混入的方法')
? ? }
? }
})
在组件中直接引用：
<template>
?? ?<div>{{msg}}</div>
</template>
<script>
export default {
? ? data() {
?? ? ? ?return {
?? ? ? ?}
? ? }
?? ?mounted() {
?? ??? ?this.mixinMethod()
?? ?}
}
// hello，这是mixin混入的方法
</script>
vue中mixin混入注意事项
1.页面和mixin的created都会执行，先执行mixin的，再执行当前页面的;
2.当前页面可以访问mixin的data和methods;
3.mixin里的方法可以调用页面的data和methods;
4.可以在当前页面改变mixin里的data
注意：当本组件与mixin有同名方法或同名数据时，优先调用本组件的方法或数据，混入的部分失效
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
查看更多关于关于vue混入(mixin)的解读的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did120043