关于vue混入(mixin)的解读

更新时间：2022年10月18日 08:35:14 作者：小铁匠95

这篇文章主要介绍了关于vue混入(mixin)的解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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有同名方法或同名数据时，优先调用本组件的方法或数据，混入的部分失效

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

uni-app项目中引入Vant UI组件库完美避坑指南（纯净版）
网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下
2024-02-02
Vue.js中vue-property-decorator的使用方法详解
vue-property-decorator是一个用于在Vue.js中使用TypeScript装饰器的库,它能够简化 Vue 组件的定义,使代码更加简洁和可维护,它能够简化Vue组件的定义,使代码更加简洁和可维护,本文将深入探讨vue-property-decorator的使用方法,并展示如何在Vue.js项目中应用它
2024-08-08
vue 添加vux的代码讲解
通过命令npm install vux --save添加vux，在相关配置文件中配置信息，具体代码添加方法，大家参考下本文
2017-11-11
vue实现子路由调用父路由的方法
这篇文章主要介绍了vue实现子路由调用父路由的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue项目设置打包后的静态文件访问路径
这篇文章主要介绍了vue项目设置打包后的静态文件访问路径,vue项目的最终项目文件需要经过打包输出,静态文件的访问路径需要在vue.config.js文件中设置,本文给大家介绍的非常详细,需要的朋友可以参考下
2024-02-02
Vue数据双向绑定底层实现原理
这篇文章主要为大家详细介绍了Vue数据双向绑定底层实现原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
vue 实现超长文本截取,悬浮框提示
这篇文章主要介绍了vue 实现超长文本截取,悬浮框提示，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue3 Suspense实现优雅处理异步数据加载
Suspense 是 Vue 3 中用于处理异步数据加载的特性,它使得在加载异步数据时可以提供更好的用户体验,下面小编就来和大家详细讲讲Suspense如何优雅处理异步数据加载吧
2023-10-10
vue-router传参的四种方式超详细讲解
这篇文章主要介绍了vue-router传参的四种方式超详细,有router-link路由导航方式传参，调用$router.push实现路由传参，通过路由属性name匹配路由，再根据params传递参数等等，结合示例代码讲解的非常详细，需要的朋友可以参考下
2022-12-12
vue如何实现二进制流文件导出excel
这篇文章主要介绍了vue如何实现二进制流文件导出excel，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06