詳解vue之mixin的使用

Posted on by

vue之mixin的使用

  • 作用：在引入組件之後，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合並。相當於在引入後，父組件的各種屬性方法都被擴充瞭
  • data數據的等訪問原則：若是使用mixin的當前組件有該 data數據 或者 methods方法的話 直接運用的是當前組件的數據或者方法，否則的話直接繼承mixin內部的數據與方法
  • 註意點：可以定義共用的變量，在每個組件中使用，引入組件中之後，各個變量是相互獨立的，值的修改在組件中不會相互影響
  • 註意點2：mixin是在引入組件之後與組件中的對象和方法進行合並，相當於擴展瞭父組件的data數據與方法等，可以理解為形成瞭一個新的組件

mixin之中的data數據訪問

mixin / index.js

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

Home.vue

  • 在Home組件中使用mixin
<template>
  <div>
    <div>home -- {{ msg }}</div> /* home修改的msg */
  </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>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }}</div> /*  about2修改的msg */
  </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>

mixin中的 methods方法和computed使用

mixin / index.js

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);
    }
  }
}

Home.vue

<template>
  <div>
    <div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
    /* home --- msg-home修改的msg UserName-我是計算屬性的UserName */
  </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>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
    /* about2 -- about2修改的msg UserName-我是計算屬性的UserName */
  </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>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：