vue之mixin混入

vue之mixin混入

mixin是什么?

官方的解释:
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

感觉有点难以理解,其实简单来说:就是将组件的公共逻辑或者配置提取出来,哪个组件需要用到,直接将提取的这部分混入到组件内部即可,提取的是逻辑或配置,而不是HTML代码和CSS代码。

mixin的特点

mixin中的数据和方法都是独立的,组件之间使用后是互相不影响的。

使用

1.定义mixin.js文件

mixin是一个对象,但是本身也是有生命周期的,可以定义属性和方法等

export const mixins = {
  data() {
    return {
      msg: "我是原本的结果",
    };
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函数");
  },
  mounted() {
    console.log("我是mixin中的mounted生命周期函数");
  },
  methods: {
    clickMe() {
      console.log("我是mixin中的点击事件");
    },
  },
};

mixin.js中的msg,clickMe在混入其他组件后都可以直接使用。

2.局部混入

index.vue文件

<template>
  <div id="app">
    <button @click="clickMe">点击我</button>
    <button @click="changeMsg">更改mixin数据</button>
	点击更换的数据:{{msg}}
    <demo></demo>
  </div>
</template>

<script>
import { mixins } from "@/mixin/index.js";
import demo from "./demo.vue";
export default {
  name: "App",
  mixins: [mixins],
  components: { demo },
  created() {
    console.log("组件调用minxi数据", this.msg);
  },
  mounted() {
    console.log("我是组件的mounted生命周期函数");
  },
  methods: {
    changeMsg() {
      this.msg = "我是点击后的结果";
      console.log("更改后的msg:", this.msg);
    },
  },
};
</script>

在混入mixin.js同时导入一个混入过的demo.vue组件,来验证一下同一个数据之间是否相互影响。
demo.vue

<template>
  <div>mixin中的数据:{{ msg }}</div>
</template>
<script>
import { mixins } from "@/mixin/index.js";
export default {
  mixins: [mixins],
};
</script>

vue之mixin混入_第1张图片
经过测试发现是不影响的。

3.生命周期的执行顺序:

vue之mixin混入_第2张图片
这是没有带入demo组件时候,生命周期的执行顺序:
vue之mixin混入_第3张图片
导入demo组件后的生命周期:
vue之mixin混入_第4张图片

4.冲突

如果属性名或者方法名冲突的话如何执行呢?四个字总结就是就近原则,组件本身有会覆盖混入的。

5.全局混入

在main.js中导入注册即可

import { mixins } from "@/mixin/index.js";
Vue.mixin(mixins);

你可能感兴趣的:(vue,vue.js,前端,javascript)