Vue中的mixins和ref用法

实现student和school组件中都能点击弹出名字，可以用混合将其抽离出来，混合的本质是与原本组件做交集，不会影响原组件的数据，若有冲突，原组件优先级更高
下面是school组件代码

<template>
  <div>
    <h1 @click="showName">学校名字:{{ name }}</h1>
    <h1>{{ address }}</h1>
    <button @click="changeAddress">点击修改地址</button>
  </div>
</template>

<script>
//引入混合，提高复用, 哪里用哪里引入，在main.js引入就是全局
//数据冲突时以原本文件为主。
//生命周期钩子不会冲突，混合中都会加载,先输出mixin里的mount,因为先import完成
import { mixin } from "../mixin";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "school",
  data() {
    //是函数式，因为组件内的数据最好不要共享
    return {
      name: "a school",
      address: "北京",
    };
  },
  methods: {
    changeAddress() {
      console.log(this.address);
      this.address = "武汉";
    },
  },
  mounted(){
  console.log('这是student的mount')
  },
  mixins: [mixin] //可以引入多个mixin
};
</script>
<style  scoped>
</style>

student组件代码，ref的用法写在了to_see方法中

<template>
    <div>
        <h2 @click="showName">学生:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="age_add">点击增加年龄</button>
        <button @click="to_see" ref="btn">点击查看dom元素</button>
    </div>
</template>

<script>
import {mixin} from '../mixin'; 
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'student',
    data() { //是函数式，因为组件内的数据最好不要共享
        return {
            name:'a student',
            age:23
        };
    },
    methods: {
        age_add(){
            this.age++
        },
        to_see(){
          console.log(this.$refs.btn);//获取dom元素类似于getElementById,获取原本dom
        }

    },mixins: [mixin]

};
</script>

mixin.js

export const mixin = {
    methods: {
        showName() {
            console.log(this.name);
           alert(this.name);
        }
    },mounted() {
        console.log('这是混合里的mounted');
    },   
}