mixin 混入

Student 组件

<template>
  <div>
    <h2 @click="showname">姓名：{{ name }}</h2>
    <h2>性别：{{ sex }}</h2>
    <h2>{{ x }}和{{ y }}</h2>
  </div>
</template>

<script>
//引入混合
import { hunhe, hunhe2 } from "../mixin";

export default {
  name: "Student",
  data() {
    return {
      name: "Andy",
      sex: "male",
    };
  },
  mounted() {
    console.log("我是student的mounted");
  },
  mixins: [hunhe, hunhe2],
};
</script>

School 组件

<template>
  <div>
    <h2 @click="showname">名称：{{ name }}</h2>
    <h2>地点：{{ address }}</h2>
    <h2>{{ x }}和{{ y }}</h2>
  </div>
</template>

<script>
//引入混合
import { hunhe, hunhe2 } from "../mixin";

export default {
  name: "School",
  data() {
    return {
      name: "TKKC",
      address: "Xiamen",

      //混合的优先级低一些
      x: 666,
    };
  },
  mounted() {
    console.log("我是school的mounted");
  },
  mixins: [hunhe, hunhe2],
};
</script>

mixin.js

export const hunhe = {
    methods: {
        showname() {
            alert(this.name)
        }
    },
    mounted() {
            console.log('我是mixin')
        }
}

export const hunhe2 = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

App 组件

<template>
  <div>
      <Student></Student>
      <hr>
      <School></School>
  </div>
</template>

<script>
import Student from './components/Student.vue'
import School from './components/School.vue'

export default {
    name:'App',
    components:{Student,School}
}
</script>