mixin 混入

 

export const mixins = {
  data () {
    return {
      msg: '我是小猪课堂',
    }
  },

  computed: {},
  created () {
    console.log('我是mixin中的created生命周期函数')
  },
  mounted () {
    console.log('我是mixin中的mounted生命周期函数')
  },
  methods: {
    clickMe () {
      console.log('我是mixin中点击事件')
    }
  },
}

<template>
  <div>
    头部
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
// 局部混入
 import { mixins } from "../../../mixin/index"
export default {
   mixins: [mixins],
  created () {
    this.msg = "我是变异的小猪"
    console.log('header', this.msg);
  },
}
</script>

在min.js

//全局注入mixin

// import { mixins } from '../src/mixin/index'

// Vue.mixin(mixins)

其他组件改变msg    引入mixin里的msg不会发生改变