Vue用mixin合并重复代码的实现

<template>
  <div class="Child1">
    <h1>我是子组件1</h1>
    <p>我现在很{{status}}</p>
    <button @click="submitChange">点击我</button>
  </div>
</template>
 
<script>
import { Happy } from '../mixin/showHappy'
export default {
  name: "Child1",
  mixins: [Happy]
}
</script>

<template>
  <div class="Child2">
    <h1>我是子组件2</h1>
    <p>我现在很{{status}}</p>
    <button @click="submitChange">点击我</button>
  </div>
</template>
 
<script>
import { Happy } from '../mixin/showHappy'
export default {
  name: "Child2",
  mixins: [Happy]
}
</script>

<template>
 <div class="Father">
  <h1>我是父组件</h1>
  <child1-component />
  <child2-component />
 </div>
</template>
 
<script>
import Child1Component from './Child1'
import Child2Component from './Child2'
export default {
 name: 'Father',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 components:{
  Child1Component,
  Child2Component
 }
}
</script>

/*这里是专门用来进行mixin测试的(通过点击按钮会相应的改变对应状态)*/
export const Happy = {
  data(){
    return{
      isRealHappy:true,
      status: '',
      sad: '难受',
      comfort: '舒服'
    }
  },
  methods:{
    submitChange(){
      if(this.isRealHappy){
        this.isRealHappy = !this.isRealHappy
        this.status = this.comfort
      }else{
        this.isRealHappy = !this.isRealHappy
        this.status = this.sad
      }
    }
  }
}

import Vue from 'vue'
import Router from 'vue-router'
import Father from '@/components/Father'
 
Vue.use(Router)
 
const routes = [
 {
  path: '/',
  name: 'Father',
  component: Father
 }
]
const routers = new Router({
 mode: 'history',
 routes
})
export default routers