0%

mixin混合

mixin:

​ 可以把多个组件共用的配置提取成一个混入对象

使用方式:

​ 全局混入:Vue.mixin(xxx)

​ 局部混入:mixins:[“xxx”]

//mixin.js
export const hunhe = {
    methods: {
        showName() {
            alert(this.name);
        },
    },
}
export const hunhe2 = {
    data() {
        return {
            x: 200,
            y: 300
        }
    },
}
<template>
  <div>
    <button @click="showName">点我展示名称</button>
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
  </div>
</template>

<script>
import { hunhe, hunhe2 } from "../mixin";
export default {
  name: "Student",
  data() {
    return {
      name: "卢航我儿",
      sex: "男",
    };
  },
  mixins: [hunhe, hunhe2],
};
</script>