vue中的mixin（混入）的用法

勇敢小陈

于 2022-04-20 12:34:19 发布

阅读量948

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/ct5211314/article/details/124294595

版权

本文介绍了如何在Vue.js项目中使用混入（Mixin）来实现代码复用和组件间的逻辑共享。通过创建一个包含通用逻辑的JS文件，然后在需要的组件中引入并混入，可以有效地组织和简化代码。示例展示了在混入文件中定义`beforeMount`钩子、数据属性和方法，并在组件中调用这些混入方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发的过程中总会遇到一些需要复用的事件和逻辑，我们可以将其单独的抽离出来，放到一个js文件中，在需要的地方进行引入，比如通过mixin混入实现。用于实现把多个组件共用的配置提取成一个混入对象

一、创建一个js文件用于混入（可直接写vue实例的配置）

export default {
    beforeMount() {
        console.log(this);
    },
    data(){
        return{
            num:100
        }
    },
    methods: {
        textMinxin(a){
            console.log(a)
        }
    }
}

二、将混入文件引入到对应的组件中去（直接将对应的内容挂载到组件实例上去）

<template>
  <div class="home">
    <h1><button @click="change">触发混入方法</button>{{num}}</h1>
    <HelloWorld ref="HelloWorld" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import mixin from "../mixin/mixin"
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  mixins:[mixin],
  methods: {
    change() {
      this.textMinxin('触发了混入方法')
      
    },
  },
};
</script>