Vue混入使用和選項(xiàng)合并詳解

更新時間：2021年10月14日 15:21:47 作者：陌上花開然不歸矣

這篇文章主要介紹了Vue混入使用和選項(xiàng)合并，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、在組件中使用

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

<template>
  <div class="event_style">
    <h2>基礎(chǔ)</h2>
    <div class="inner_children">
      <span>{{ message }}</span>
    </div>
  </div>
</template>
<script>
var myMixin = {
  data() {
    return {
      message: "",
    };
  },
  created: function () {
    console.log("created:add mixin");
    this.message = "created:add mixin";
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("hello from mixin!");
    },
  },
};
// 定義一個使用混入對象的組件
export default {
  name: "mixin-basic",
  mixins: [myMixin],
};
</script>

2、選項(xiàng)合并

當(dāng)組件和混入對象含有同名選項(xiàng)時，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。

比如，數(shù)據(jù)對象在內(nèi)部會進(jìn)行遞歸合并，并在發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。

<template>
  <div class="event_style">
    <h2>選項(xiàng)合并</h2>
    <div class="inner_children">
      <span>{{ message }}</span>
      <span>{{ message1 }}</span>
    </div>
  </div>
</template>
<script>
var myMixin = {
  data() {
    return {
      message: "mixin:mixin",
      message1: "mixin:mixin-1",
    };
  },
  created: function () {
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("mixin:hello from mixin!");
    },
  },
};
// 定義一個使用混入對象的組件
export default {
  name: "mixin-merge",
  mixins: [myMixin],
  data() {
    return {
      message: "組件：hello",
    };
  },
  created: function () {
    this.hello();
  },
  methods: {
    hello: function () {
      console.log("組件：hello world!");
    },
  },
};
</script>
<style scoped>
.event_style {
  padding-left: 50px;
  padding-right: 50px;
}
.inner_children {
  display: flex;
  flex-direction: column;
  height: 150px;
  border: 1px solid #333;
  padding: 6px;
}
.inner_children span {
  font-size: 20px;
}
</style>

頁面呈現(xiàn)的效果