当前位置：首页 > article >正文

3.9、mixins配置（混入）

article 2025/1/11 23:02:46

3.9.1、需求：

点击按钮，分别获取对应的组件信息

son.vue

<template>
    <div>
        <h2>son组件</h2>
        <h3>姓名：{{ name }}</h3>
        <h3>年龄：{{ age }}</h3>
        <button @click="getmsg">点我获取信息</button>
        <hr>
    </div>
</template>

<script>
export default {
    name: 'son',
    data() {
        return {
            name: '章三',
            age: 18,
        }
    },
    methods: {
        getmsg() {
            console.log(this.name,this.age);
            
        }
    }
}
</script>

通过代码发现，无论是在son.vue中，还是girl.vue中，实现点击获取信息的代码是一样的，逻辑也是一样的。这样的代码就可以进行复用，用mixins配置进行混入，

3.9.2、实现的步骤

1、第一步：提取

单独定义一个mixin.js（一般和main.js在同级目录），代码如下：

mixins.js

export const getmsgMixins = {
  methods: {
    getmsg() {
      console.log(this.name, this.age);
    },
  },
};

2、第二步：引入并使用

<script>
// 混入第二步、引入并使用
import { getmsgMixins } from '../mixins.js'
export default {
    name: 'son',
    data() {
        return {
            name: '章三',
            age: 18,
        }
    },
    //混入第三步 使用mixins
    mixins: [getmsgMixins]
    // 混入第一步、提取  将逻辑代码提取到单独的minxis.js中
    
    // methods: {
    //     getmsg() {
    //         console.log(this.name,this.age);

    //     }
    // }
}
</script>

以上演示的是方法methods的混入，实际上混入时没有限制，之前所学的配置项都可以混入。

3.9.3、混入的冲突问题

1、如果在组件本身的方法名，跟mixins.js的方法名重复了，则会产生冲突吗

不会冲突，如果冲突了，会执行组件自身的，不会执行混入的

2、组件的生命周期函数和混入的生命周期函数冲突了？

对于生命周期钩子函数来说，都有的话，采用叠加，先执行混入的，再执行自己的。

<script>
// 混入第二步、引入并使用
import { getmsgMixins } from '../mixins.js'
export default {
      ·····
    // 2、组件中的方法名跟混入的方法名重复了
    // methods: {
    //     getmsg(){
    //       console.log('我是另外一个getmsg函数');
          
    //     }
    // },
    // 3、生命周期函数重复了
    mounted(){
        console.log('我是son组件中的mounted函数');
        
    }
}
</script>