混入组件 (mixin)

mixin

混入 (mixin)Vue 组件中的可复用功能
作用：主要作用是继承和封装，将一些共的代码抽离，可以减少代码量，提高复用性*
1
2

mixin 使用

小白版

首先在src下创建一个mixins文件夹，再新建一个js文件

index.js文件(用于mixin文件)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

需要引入index.js的页面

<template>
  <div id="app">
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import { mixins } from "./mixin/index";
export default {
  name: "App",
  mixins: [mixins],
  components: {},
methods:{
 clickMe() {
        alert(this.msg)
    }
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

日常使用

index.js

在这里插入代码片
1

需要引入index.js文件

在这里插入代码片
1