一文搞懂Vue2中的組件通信

更新時(shí)間：2022年07月28日 11:32:46 作者：lupulus

這篇文章主要為大家介紹了Vue2中的組件通信方式，文中通過(guò)示例進(jìn)行了詳細(xì)的介紹，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的小伙伴可以了解一下

vue 組件通信方式

1.父組件將自己的狀態(tài)分享給子組件使用；

方法：父組件通過(guò)子標(biāo)簽傳遞數(shù)據(jù)，子組件通過(guò) props 接收

2.子組件改變父組件的狀態(tài);

方法：父組件在子標(biāo)簽上通過(guò)@abc 提供一個(gè)改變自身狀態(tài)的方法，子組件通過(guò)$emit("abc", payload)觸發(fā)這個(gè)函數(shù)

3.父組件直接改變子組件的狀態(tài)；

方法：父組件設(shè)法($ref,$children[0])拿到子組件實(shí)例對(duì)象，然后通過(guò)實(shí)例對(duì)象直接修改子組件狀態(tài)

4.子組件直接改變父組件的狀態(tài)

方法：子組件通過(guò)$parent拿到父組件的改變自身狀態(tài)的方法，然后直接調(diào)用（$parent 可以拿到父組件狀態(tài)，但是最好不要直接修改，而是通過(guò)父組件函數(shù)式修改，保持單向數(shù)據(jù)流）

5.父組件通過(guò)插槽向子組件傳遞數(shù)據(jù)

方法：子組件定義具名插槽，父組件向插槽內(nèi)傳遞自己的狀態(tài)

6.父組件向后代組件傳值

方法：父組件正常在標(biāo)簽上向子組件傳遞數(shù)據(jù)，子組件不用 props 接收屬性，通過(guò)$attrs獲取屬性，通過(guò)$listeners 獲取方法。子組件再向下傳遞時(shí)，使用 v-bind="$attr"傳遞屬性，使用v-on="$listeners"傳遞方法

7.父組件向后代組件傳值

方法：父組件js中定義provide函數(shù)提供數(shù)據(jù)源，后代組件通過(guò)inject去接收，inject可以是一個(gè)數(shù)組或?qū)ο蟆?/p>

注意：父組件提供的數(shù)據(jù)源如果不是響應(yīng)式的，那么后代修改數(shù)據(jù)，數(shù)據(jù)不會(huì)響應(yīng)變化。如果父組件提供的數(shù)據(jù)源是響應(yīng)式的，但是不是一個(gè)對(duì)象，那么它也不是響應(yīng)式的，所以要用對(duì)象在外包一層對(duì)象（數(shù)組不行）。另外，如果子組件同時(shí)provide一個(gè)inject祖先組件相同名稱的數(shù)據(jù)，那么子組件的后代會(huì)就近使用子組件的數(shù)據(jù)。

官網(wǎng)tip：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的 property 還是可響應(yīng)的。

8.全局通信-事件總線

方法：通過(guò)注冊(cè)一個(gè)新的vue實(shí)例作為橋梁，使用$on和$emit來(lái)完成通信

9.全局通信-vuex

略（看官方文檔嘍）

1.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: "什么都沒(méi)有",
    },
  },
};
</script>

2.emit,on通信

// 父組件向子組件提供改變自己狀態(tài)的函數(shù)
<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: "偉大萬(wàn)歲",
    };
  },
  methods: {
    changeMyMind(yourMind) {
      this.mind = yourMind;
    },
  },
};
</script>


// 子組件不用接收，直接通過(guò)$emit觸發(fā)并傳參就行
<template>
  <div>
    <p>我是子組件</p>
  </div>
</template>

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

3.$ref,$children實(shí)例通信

// 父組件通過(guò)$ref或者$children拿到子組件實(shí)例，然后直接修改子組件狀態(tài)
/**
 * this.$children`數(shù)組中的元素不是響應(yīng)式的，并且下標(biāo)并不一定對(duì)用父組件引用的子組件的順序，例如有異步加載的子組件，可能影響其在 children 數(shù)組中的順序。所以使用時(shí)需要根據(jù)一定的條件例如子組件的name去找到相應(yīng)的子組件。
 **/
<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: "我是子組件數(shù)據(jù)",
    };
  },
};
</script>

4.$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>

// 子組件通過(guò)$parent拿到父組件實(shí)例，然后直接修改父組件狀態(tài)
<template>
  <div>
    <p>我是子組件</p>
    <span>{{ childMsg }}</span>
  </div>
</template>

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

5.插槽通信（一般不用）

// 父組件
<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: "父組件的數(shù)據(jù)哦",
    };
  },
};
</script>


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

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

6.$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: "父組件的數(shù)據(jù)哦",
    };
  },
  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); 也可以觸發(fā)
      this.$listeners.changeDadData(e.target.value);
    },
  },
};
</script>

7.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: "我是個(gè)祖先數(shù)據(jù)",
      },
    };
  },
};
</script>


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

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

export default {
  components: {
    GrandSon,
  },
  inject: {
    // 起個(gè)別名
    theData: {
      // 數(shù)據(jù)來(lái)源映射
      from: "message",
      // 默認(rèn)值
      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>

8.$bus事件總線全局通信

// 父組件通過(guò)this.$bus.$on監(jiān)聽(tīng)事件
<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;
    },
  },
  // 記得清除監(jiān)聽(tīng)
  beforeDestroy() {
    this.$bus.$off("changeDadData");
  },
};
</script>


// 孫子組件通過(guò)this.$bus.$emit觸發(fā)事件
<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>

到此這篇關(guān)于一文搞懂Vue2中的組件通信的文章就介紹到這了,更多相關(guān)Vue2組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: