如何進(jìn)行vue中mixin的使用

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何進(jìn)行vue中mixin的使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

vue之mixin的使用

• 作用：在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了

• data數(shù)據(jù)的等訪問原則：若是使用mixin的當(dāng)前組件有該 data數(shù)據(jù) 或者 methods方法的話 直接運(yùn)用的是當(dāng)前組件的數(shù)據(jù)或者方法，否則的話直接繼承mixin內(nèi)部的數(shù)據(jù)與方法

• 注意點(diǎn)：可以定義共用的變量，在每個(gè)組件中使用，引入組件中之后，各個(gè)變量是相互獨(dú)立的，值的修改在組件中不會(huì)相互影響

• 注意點(diǎn)2：mixin是在引入組件之后與組件中的對(duì)象和方法進(jìn)行合并，相當(dāng)于擴(kuò)展了父組件的data數(shù)據(jù)與方法等，可以理解為形成了一個(gè)新的組件

mixin之中的data數(shù)據(jù)訪問

mixin / index.js

export default {
  data () {
    return {
      msg: "我是mixin內(nèi)的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數(shù)據(jù)
    console.log("home打印一下", this.msg); //home打印一下 我是mixin內(nèi)的msg
    // 修改mixin的data數(shù)據(jù)
    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 這個(gè)數(shù)據(jù)
  },
  methods: {
  },
};
</script>
<style  lang="scss" scoped>
</style>

mixin中的 methods方法和computed使用

mixin / index.js

export default {
  data () {
    return {
      msg: "我是mixin內(nèi)的msg"
    }
  },
  created () { },
  mounted () { },
  computed: {
    UserName () {
      return "我是計(jì)算屬性的UserName";
    },
  },
  methods: {
    tipMsg () {
      console.log("minxin內(nèi)的tipMsg方法", this.msg);
    },
    tipInfo (info) {
      console.log("minxin內(nèi)的tipInfo方法", info);
    }
  }
}

Home.vue

<template>
  <div>
    <div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
    /* home --- msg-home修改的msg UserName-我是計(jì)算屬性的UserName */
  </div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
  name: "Home",
  mixins: [mixin],
  components: {},
  data() {
    return {};
  },
  created() {
    // 拿mixin的data數(shù)據(jù)
    console.log("home打印一下", this.msg); //home打印一下 我是mixin內(nèi)的msg
    // 修改mixin的data數(shù)據(jù)
    this.msg = "home修改的msg";
    console.log("home打印一下", this.msg); // home打印一下 home修改的msg
    // 調(diào)用mixin中的 tipMsg 方法
    this.tipMsg(); // minxin內(nèi)的tipMsg方法 home修改的msg
    this.tipInfo("我是home的菜雞info"); // minxin內(nèi)的tipInfo方法 我是home的菜雞info
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

About2.vue

<template>
  <div>
    <div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
    /* about2 -- about2修改的msg UserName-我是計(jì)算屬性的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 這個(gè)數(shù)據(jù)
    this.tipMsg(); // 最后打印 -> 我是about2本地的tipMsg方法
    this.tipInfo(); // minxin內(nèi)的tipInfo方法 undefined
  },
  methods: {
    tipMsg() {
      console.log("我是about2本地的tipMsg方法");
    },
  },
};
</script>

上述就是小編為大家分享的如何進(jìn)行vue中mixin的使用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。