mixins混合

App.vue文件

<template>
  <div id="app">
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDom">点我输出上方DOM元素</button>
    <School></School>
    <Student :age="18" gender="女" stuId="B21044513"></Student>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components: {
    School,
    Student
  },
  data() {
    return {
      msg: '欢迎学习vuecli'
    }
  },
  methods: {
    showDom() {
      console.log(this.$refs.title);
    }
  },

}
</script>

<style>

</style>

Student.vue文件

<template>
  <div class="student">
    <h2 @click="showName">学生姓名：{{msg.name}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <h2>学生性别：{{gender}}</h2>
    <h2>学生学号：{{stuId}}</h2>
    <h2>要修改的myAge{{myAge+1}}</h2>
    <button @click="updateMyAge">点击修改myAge</button>
  </div>
</template>

<script>
import {hunhe} from '../mixin'

export default {
  name: 'Student',
data() {
  return {
    msg: {
      name:'张三',
    },
    myAge: this.age
  }
},
methods: {
  updateMyAge() {
    this.myAge++;
  }
},
// 接收到的props是不允许更改的
props: ['age','gender','stuId'],
//接收的同时对类型进行限制
// props: {
//   age:Number,
//   gender:String,
//   stuId:String
// }

// props: {
//   age: {
//     type:Number,
//     required:true
//   },
//   stuId: {
//     type:String,
//     required:true
//   },
//   gender: {
//     type:String,
//     default: '男'
//   }
// }
mixins:[hunhe],
}
</script>

<style>
.student {
  background-color: orange;
}
</style>

School.vue文件

<template>
  <div class="school">
    <h2 @click="showName">学校名称：{{msg.name}}</h2>
    <h2>学校地址：{{msg.address}}</h2>
  </div>
</template>

<script>
import {hunhe} from '../mixin'
export default {
data() {
  name: 'School'
  return {
    msg: {
      name:'XXX学校',
      address:'河南省XXX市'
    }
  }
},
mixins:[hunhe]
}
</script>

<style>
.school {
  background-color: red;
}
</style>

mixins.js

export const hunhe =
//export分别引入
{
  methods: {
    showName() {
      alert(this.msg.name);
    }
  }
}