到底是谁亲了刘亦菲 !???

大家好,我是大帅子,今天讲一下我们vue中的mixins混入

---

mixins其实就是一种vue中的混入 , 一个方便的组件传值方式

主要的应用场景其实就是我们需要一个公用的方法或者变量的时候,我们拿来即用,跟vuex差不多,但是vuex适合大型项目,有的小型项目用起来就会杀鸡用牛刀的感觉了,我们先介绍用法,然后在介绍弊端

此时我们模拟一下多个组件需要用一个方法的时候

组件a

<template>
  <div>
    我爱 : {{}}
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },

};
</script>

组件b

<template>
  <div>
   我爱 : {{}}
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },

};
</script>

组件c

<template>
  <div>
   我爱 : {{}}
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },

};
</script>

ok,我们先创建三个组件,完成之后我们就可以创建一个叫mixins.vue的公共组件吧

<template>
  <div></div>
</template>

<script>
export default {
  name: "mixins",
  data() {
    return {
      name: "刘亦菲",
    };
  },
  methods: {
    mixinFunction() {
      return "我想亲亲";
    },
  }
};
</script>

使用方法

很简单我们就三步 ,那就来吧

1. 组件局部导入

import Mixins from "./components/mixin.vue";

2. 注册

mixins: [Mixins],

3.直接使用

<template>
  <div>
   我爱: {{ name }}
    <div @click="mua">调用mixin的方法</div>
  </div>
</template>

  methods: {
    mua() {
      let mixfun = this.mixinFunction();
      console.log( `${mixfun}${this.name}` );
     this.name = "迪丽热巴";
    }
  }

最后我们既能修改,我们也能直接使用,一方面就是方便使用,另一方便就会导致不知道是哪个组件亲了我的刘亦菲,大胆!

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!