详解vue之mixin的使用

export default {
  data () {
    return {
      msg: "我是mixin内的msg"
    }
  },
  created () {
  },
  mounted () { },
  methods: {
  }
}

<template>
  <div>
    <div>home -- {{ msg }}</div> 
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  data() {
    return {    };
  },
  created() {
    // 拿mixin的data数据
    console.log("home打印一下", this.msg); //home打印一下 我是mixin内的msg
    // 修改mixin的data数据
    this.msg = "home修改的msg";
    console.log("home打印一下", this.msg); // home打印一下 home修改的msg
  },
  methods: {
  },
};
</script>
<style  lang="sCSS" scoped>
</style>

<template>
  <div>
    <div>about2 -- {{ msg }}</div> 
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "About2",
  mixins: [mixin],
  components: {},
  data() {
    return {
      msg: "本地的msg",
    };
  },
  created() {
    console.log("about2打印一下", this.msg); // 本地的msg
    this.msg = "about2修改的msg";
    console.log("about2打印一下", this.msg); // about2修改的msg
    // 最后页面 显示的 about2修改的msg 这个数据
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
</style>

export default {
  data () {
    return {
      msg: "我是mixin内的msg"
    }
  },
  created () { },
  mounted () { },
  computed: {
    UserName () {
      return "我是计算属性的UserName";
    },
  },
  methods: {
    tipMsg () {
      console.log("minxin内的tipMsg方法", this.msg);
    },
    tipInfo (info) {
      console.log("minxin内的tipInfo方法", info);
    }
  }
}

<template>
  <div>
    <div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
    
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  components: {},
  data() {
    return {};
  },
  created() {
    // 拿mixin的data数据
    console.log("home打印一下", this.msg); //home打印一下 我是mixin内的msg
    // 修改mixin的data数据
    this.msg = "home修改的msg";
    console.log("home打印一下", this.msg); // home打印一下 home修改的msg
    // 调用mixin中的 tipMsg 方法
    this.tipMsg(); // minxin内的tipMsg方法 home修改的msg
    this.tipInfo("我是home的菜鸡info"); // minxin内的tipInfo方法 我是home的菜鸡info
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

<template>
  <div>
    <div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
    
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "About2",
  mixins: [mixin],
  components: {},
  data() {
    return {
      msg: "本地的msg",
    };
  },
  created() {
    console.log("about2打印一下", this.msg); // 本地的msg
    this.msg = "about2修改的msg";
    console.log("about2打印一下", this.msg); // about2修改的msg
    // 最后页面 显示的 about2修改的msg 这个数据
    this.tipMsg(); // 最后打印 -> 我是about2本地的tipMsg方法
    this.tipInfo(); // minxin内的tipInfo方法 undefined
  },
  methods: {
    tipMsg() {
      console.log("我是about2本地的tipMsg方法");
    },
  },
};
</script>