vue混入,vue的minxin混入，

最新推荐文章于 2024-07-07 19:01:01 发布

原创最新推荐文章于 2024-07-07 19:01:01 发布 · 1.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

应用专栏收录该内容

2 篇文章

订阅专栏

本文探讨了Vue中混入(mixins)与组件的区别及其使用场景，详细解析了混入规则，包括如何处理data、methods及生命周期函数的冲突。

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

vue的minxin混入

在这里插入图片描述

1.混入(mixins)与组件的区别

共同点:
①:目的都是提高复用性,减少代码量
②:可以在全局或者局部使用
不同点:
①组件注重表现形式相对独立
②混入注重逻辑相对独立

2.mixin的混入规则

当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
1.当mixin中定义的data,methods,生命周期函数等,在页面中能访问
2.如果变量冲突,以页面为主
3.如果方法冲突,会执行两遍

上面的代码：

minxin_demo.js

const mixin = {
    data() {
        return {
            aa: 'aa'
        }
    },
    created() {
        this.gg(1)
    },
    methods: {
        gg(val) {
            console.log(this.aa, val)
        }
    },
}
export default mixin;

组件.vue

<template>
  <div></div>
</template>
<script>
import mixin from "../../utils/minxin_demo";
export default {
  mixins: [mixin],
  data() {
    return {
      aa: "aa",
    };
  },
  created() {
    this.gg(2);
  },
};
</script>