技術文章 » 一文搞定Vue2元件通訊

一文搞定Vue2元件通訊

2022-07-28 12:00:52

vue 元件通訊方式

  1. 父元件將自己的狀態分享給子元件使用；

    方法：父元件通過子標籤傳遞資料，子元件通過 props 接收

  2. 子元件改變父元件的狀態;

    方法：父元件在子標籤上通過@abc 提供一個改變自身狀態的方法，子元件通過$emit("abc", payload)觸發這個函數

  3. 父元件直接改變子元件的狀態；

    方法：父元件設法($ref,$children[0])拿到子元件範例物件，然後通過範例物件直接修改子元件狀態

  4. 子元件直接改變父元件的狀態

    方法：子元件通過$parent拿到父元件的改變自身狀態的方法，然後直接呼叫（$parent 可以拿到父元件狀態，但是最好不要直接修改，而是通過父元件函數式修改，保持單向資料流）

  5. 父元件通過插槽向子元件傳遞資料

    方法：子元件定義具名插槽，父元件向插槽內傳遞自己的狀態

  6. 父元件向後代元件傳值

    方法：父元件正常在標籤上向子元件傳遞資料，子元件不用 props 接收屬性，通過$attrs獲取屬性，通過$listeners 獲取方法。子元件再向下傳遞時，使用 v-bind="$attr"傳遞屬性，使用v-on="$listeners"傳遞方法

  7. 父元件向後代元件傳值

    方法：父元件js中定義provide函數提供資料來源，後代元件通過inject去接收，inject可以是一個陣列或物件。

    注意：父元件提供的資料來源如果不是響應式的，那麼後代修改資料，資料不會響應變化。如果父元件提供的資料來源是響應式的，但是不是一個物件，那麼它也不是響應式的，所以要用物件在外包一層物件（陣列不行）。另外，如果子元件同時provide一個inject祖先元件相同名稱的資料，那麼子元件的後代會就近使用子元件的資料。

    官網tip：provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的物件，那麼其物件的 property 還是可響應的。

    https://cn.vuejs.org/v2/api/

  8. 全域性通訊-事件匯流排

    方法：通過註冊一個新的vue範例作為橋樑，使用$on和$emit來完成通訊

  9. 全域性通訊-vuex

    略（看官方檔案嘍）

    https://vuex.vuejs.org/zh/

第一種： props傳參

// 父元件向子元件傳遞msg
<template>
  <div>
    <p>我是dad</p>
    <Child :msg="msg" />
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      msg: "父親的忠告",
    };
  },
};
</script>

// 子元件props接收
<template>
  <div>
    <p>我是子元件</p>
    <span>{{ msg }}</span>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: "什麼都沒有",
    },
  },
};
</script>

第二種：emit，on通訊

// 父元件向子元件提供改變自己狀態的函數
<template>
  <div>
    <p>我是dad</p>
    <Child @changeMyMind="changeMyMind" />
    <span>{{ mind }}</span>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      mind: "偉大萬歲",
    };
  },
  methods: {
    changeMyMind(yourMind) {
      this.mind = yourMind;
    },
  },
};
</script>


// 子元件不用接收，直接通過$emit觸發並傳參就行
<template>
  <div>
    <p>我是子元件</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit("changeMyMind", "躺平鳥");
  },
};
</script>

第三種：$ref,$children範例通訊

// 父元件通過$ref或者$children拿到子元件範例，然後直接修改子元件狀態
/**
 * this.$children`陣列中的元素不是響應式的，並且下標並不一定對用父元件參照的子元件的順序，例如有非同步載入的子元件，可能影響其在 children 陣列中的順序。所以使用時需要根據一定的條件例如子元件的name去找到相應的子元件。
 **/
<template>
  <div>
    <p>我是dad</p>
    <Child ref="childRef" />
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  mounted() {
    // this.$children[0].childMsg = "不你不是";
    this.$refs.childRef.childMsg = "不你不是";
  },
};
</script>



// 子元件等著被改就行
<template>
  <div>
    <p>我是子元件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: "我是子元件資料",
    };
  },
};
</script>

第四種：$parent通訊

// 父元件
<template>
  <div>
    <p>我是dad</p>
    <Child />
    <span>{{ aa }}</span>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      aa: "",
    };
  },
  methods: {
    changeAa(data) {
      this.aa = data;
    },
  },
};
</script>

// 子元件通過$parent拿到父元件範例，然後直接修改父元件狀態
<template>
  <div>
    <p>我是子元件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMsg: "我是子元件資料",
    };
  },
  mounted() {
    // this.$parent.aa = "我改了哈"; 不推薦
    this.$parent.changeAa("我改了哦");
  },
};
</script>

第五種：插槽通訊（一般不用）

// 父元件
<template>
  <div>
    <p>我是dad</p>
    <Child>
      <template v-slot:boring>
        {{ aa }}
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./ChildItem.vue";

export default {
  components: {
    Child,
  },
  data() {
    return {
      aa: "父元件的資料哦",
    };
  },
};
</script>


// 子元件定義插槽
<template>
  <div>
    <p>我是子元件</p>
    <slot name="boring"></slot>
  </div>
</template>

<script>
export default {};
</script>

第六種：$attr,$listener深層雙向通訊

// 父元件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son :dadData="dadData" @changeDadData="changeDadData" @keyup="someKeyUp" />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "父元件的資料哦",
    };
  },
  methods: {
    changeDadData(newData) {
      this.dadData = newData;
    },
    someKeyUp(e) {
      console.log(e.target.value);
    },
  },
};
</script>



// 兒子元件
<template>
  <div>
    <p>我是兒子元件</p>
    <span>{{ $attrs.dadData }}</span>
    <input type="text" v-on="$listeners" />
    <GrandSon v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";

export default {
  components: {
    GrandSon,
  },
  mounted() {
    console.log(this.$listeners);
  },
};
</script>

// 孫子元件
<template>
  <div>
    <p>我是孫子元件</p>
    <input type="text" @input="grandsonInput" />
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      //   this.$emit("changeDadData", e.target.value); 也可以觸發
      this.$listeners.changeDadData(e.target.value);
    },
  },
};
</script>

第七種：provide，inject依賴注入深層次單向通訊

// 父元件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadMessage }}</span>
    <Son />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  provide() {
    return {
      message: this.dadMessage,
    };
  },
  data() {
    return {
      dadMessage: {
        textContent: "我是個祖先資料",
      },
    };
  },
};
</script>


// 兒子元件
<template>
  <div>
    <p>我是兒子元件</p>
    <span>{{ theData }}</span>
    <GrandSon />
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";

export default {
  components: {
    GrandSon,
  },
  inject: {
    // 起個別名
    theData: {
      // 資料來源對映
      from: "message",
      // 預設值
      default: () => ({ message: { textContent: "啥也不是" } }),
    },
  },
};
</script>


// 孫子元件
<template>
  <div>
    <p>我是孫子元件</p>
    <input type="text" @input="grandsonInput" />
    <span>{{ message.textContent }}</span>
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      this.message.textContent = e.target.value;
    },
  },
  inject: ["message"],
};
</script>

第八種： $bus事件匯流排全域性通訊

// main.js中定義新的vue範例掛載到原型上
Vue.prototype.$bus = new Vue();

// 父元件通過this.$bus.$on監聽事件
<template>
  <div>
    <p>我是dad</p>
    <span>{{ dadData }}</span>
    <Son />
  </div>
</template>

<script>
import Son from "./SonItem.vue";

export default {
  components: {
    Son,
  },
  data() {
    return {
      dadData: "我是爹地",
    };
  },
  mounted() {
    this.$bus.$on("changeDadData", this.changeDadData);
  },
  methods: {
    changeDadData(newData) {
      this.dadData = newData;
    },
  },
  // 記得清除監聽
  beforeDestroy() {
    this.$bus.$off("changeDadData");
  },
};
</script>


// 孫子元件通過this.$bus.$emit觸發事件
<template>
  <div>
    <p>我是孫子元件</p>
    <input type="text" @input="grandsonInput" />
    <span></span>
  </div>
</template>

<script>
export default {
  methods: {
    grandsonInput(e) {
      this.$bus.$emit("changeDadData", e.target.value);
    },
  },
};
</script>