Vue組件間的8種通訊方式

前言

Vue 提供了各種各樣的通訊,其中包括兄弟間的通訊和非兄弟間的通訊,借此機(jī)會(huì)做個(gè)總結(jié)，查閱起來(lái)方便。

1、props

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1

代碼結(jié)構(gòu)

在父親組件中使用兒子組件，給兒子通過(guò):date="xxx"單向傳值

<template>
  <div>
    <div>爸爸:{{date}}</div>
    <Son1 :date="date"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      date: 1,
    };
  },
};
</script>

兒子組件通過(guò)props接受父組件傳過(guò)來(lái)的值

<template>
  <div>兒子:{{date}}</div>
</template>
<script>
export default {
  props: {
    date: {
      type: Number, //校驗(yàn)類型
      default: "1",
    },
  },
};
</script>

2、$emit

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1

代碼結(jié)構(gòu)

（推薦教程：Vue 2教程）

子組件通過(guò)觸自身的方法來(lái)觸發(fā)$emit方法,再觸發(fā)父組件的方法,通過(guò)回調(diào)傳參的方式將修改的內(nèi)容傳遞給父組件

<template>
  <div>
    <div>兒子:{{date}}</div>
    <button @click="changeNum">修改</button>
  </div>
</template>
<script>
export default {
  props: {
    date: {
      type: Number,
      default: "1",
    },
  },
  methods: {
    changeNum() {
      this.$emit("changeNum", 2);
    },
  },
};
</script>

父組件接受回調(diào)params參數(shù)，即爸爸需要給兒子綁定了一個(gè)自定義的事件，$on("changeNum",params)

<template>
  <div>
    <div>爸爸:{{date}}</div>
    <Son1 :date="date" @changeNum="changeNum"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      date: 1,
    };
  },
  methods: {
    changeNum(params) {
      this.date = params;
    },
  },
};
</script>

.sync

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1

代碼結(jié)構(gòu)

子組件通過(guò)$emit("update:xxx")發(fā)射事件

<template>
  <div>
    <div>兒子:{{date}}</div>
    <button @click="changeNum">修改</button>
  </div>
</template>
<script>
export default {
  props: {
    date: {
      type: Number,
      default: "1",
    },
  },
  methods: {
    changeNum() {
      this.$emit("update:date", 2);
    },
  },
};
</script>

父組件通過(guò):xxx.sync="xxx"接受參數(shù)

<template>
  <div>
    <div>爸爸:{{date}}</div>
    <Son1 :date.sync="date"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      date: 1,
    };
  },
};
</script>
<Son1 :date.sync="date"></Son1>
//這個(gè)寫(xiě)法是上面的替代品 默認(rèn)組件內(nèi)部觸發(fā) update:count 規(guī)定寫(xiě)法
<Son1 :date="date" @update:date="val=>date=val"></Son1>

v-model

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1

代碼結(jié)構(gòu)

子組件觸發(fā)的事件只能是input事件,接收props的屬性名只能叫value

<template>
  <div>
    <div>兒子:{{value}}</div>
    <button @click="changeNum">修改</button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    changeNum() {
      this.$emit("input", 2);
    },
  },
};
</script>

父組件通過(guò)v-model接收參數(shù)

<template>
  <div>
    <div>爸爸:{{value}}</div>
    <Son1 v-model="value"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      value: 1,
    };
  },
};
</script>
<Son1 :value="value" @input="val=>value=val"></Son1>
//這個(gè)寫(xiě)法是上面的替代品 默認(rèn)組件內(nèi)部觸發(fā) input 規(guī)定寫(xiě)法
<Son1 v-model="value"></Son1>

<br> v-model` 局限只能傳遞一個(gè)屬性 如果只有一個(gè) 可以使用`v-model` 多個(gè)依然需要使用`.sync
<br> ```

3、$parent和 $children

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1
   ├── Grandson1.vue  //孫子1

代碼結(jié)構(gòu)

如下場(chǎng)景:孫子想要給爺爺傳遞數(shù)據(jù),孫子需要找到爺爺身上的事件去傳遞$parent.$emit

<template>
  <div>
    <div>孫子{{value}}</div>
    <button @click="$parent.$emit('change',3)">修改</button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: "",
    },
  },
};
</script>

兒子組件使用孫子組件

<template>
  <div>
    <div>兒子:{{value}}</div>
    <grandson1 :value="value"></grandson1>
  </div>
</template>
<script>
import grandson1 from "./grandson1";
export default {
  components: {
    grandson1,
  },
  props: {
    value: {
      type: Number,
      default: 1,
    },
  },
};
</script>

爸爸身上給孫子自定義change事件

<template>
  <div>
    <div>爸爸:{{value}}</div>
    <Son1 @change="val=>value=val" :value="value"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      value: 1,
    };
  },
};
</script>

如果層級(jí)很深那么就會(huì)出現(xiàn)$parent.$parent.....我們可以封裝一個(gè)$dispatch方法向上進(jìn)行派發(fā)

Vue.prototype.$dispatch = function $dispatch(eventName, data) {
  let parent = this.$parent;
  while (parent) {
    parent.$emit(eventName, data);
    parent = parent.$parent;
  }
};

相同的道理，如果既然能夠向上尋找父親，就能向下尋找兒子，也可以封裝一個(gè)向下派發(fā)的方法$broadcast

Vue.prototype.$broadcast = function $broadcast(eventName, data) {
  const broadcast = function () {
    this.$children.forEach((child) => {
      child.$emit(eventName, data);
      if (child.$children) {
        $broadcast.call(child, eventName, data);
      }
    });
  };
  broadcast.call(this, eventName, data);
};

4、$attrs和 $listeners

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1
   ├── Grandson1.vue  //孫子1

$attrs批量向下傳入屬性

<template>
  <div>
    <div>爸爸:{{value}}</div>
    <Son1 @change="val=>value=val" :value="value"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      value: 1,
    };
  },
};
</script>

在兒子組件中使用 $attrs 屬性,配合v-bind可以將屬性繼續(xù)向下傳遞

<template>
  <div>
    <div>兒子:{{$attrs.value}}</div>
    <grandson1 v-bind="$attrs"></grandson1>
  </div>
</template>
<script>
import grandson1 from "./grandson1";
export default {
  components: {
    grandson1,
  },
  mounted() {
    console.log(this.$attrs);
  },
};
</script>

注意一點(diǎn)：在使用 $attrs 的時(shí)候，如果組件中使用了props 就會(huì)將屬性從當(dāng)前 attrs移除掉

在孫子組件中使用 $attrs屬性,可以將屬性繼續(xù)向下傳遞

<template>
  <div>
    <div>孫子{{$attrs.value}}</div>
  </div>
</template>
<script>
export default {
  //props: {
  //  value: Number,
  //},
  mounted() {
    console.log(this.$attrs);
  },
};
</script>

如果爸爸傳遞給兒子元素, 兒子有三個(gè)屬性用不到， 孫子傳遞給孫子，但是不想在頁(yè)面上這個(gè)屬性，可以設(shè)置inheritAttrs: false

$listeners批量向下傳入方法

<template>
  <div>
    <div>爸爸:{{value}}</div>
    <Son1 @click="change" :value="value"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  data() {
    return {
      value: 1,
    };
  },


  methods: {
    change() {
      this.value = 2;
    },
  },
};
</script>

可以在 son1 組件中使用$listeners屬性,配合v-on可以將方法繼續(xù)向下傳遞

<template>
  <div>
    <div>兒子:{{$attrs.value}}</div>
    <grandson1 v-bind="$attrs" v-on="$listeners"></grandson1>
  </div>
</template>
<script>
import grandson1 from "./grandson1";
export default {
  components: {
    grandson1,
  },
  mounted() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  },
};
</script>

孫子組件可以直接使用$listeners上的方法

<template>
  <div>
    <div>孫子{{$attrs.value}}</div>
    <button @click="$listeners.click"></button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  },
};
</script>

5、Provide & Inject

目錄結(jié)構(gòu)

app.vue
components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1
   ├── Grandson1.vue  //孫子1

代碼結(jié)構(gòu)

在父級(jí)聲明一個(gè)公共數(shù)據(jù)

export default {
  provide() {
    return { vm: this };
  },
};

在子組件中可以注入原理,會(huì)將數(shù)據(jù)掛載在當(dāng)前實(shí)例上

<template>
  <div>
    <div>孫子</div>
  </div>
</template>
<script>
export default {
  inject: ["vm"],
  mounted() {
    console.log(this);
  },
};
</script>

注意事項(xiàng):這個(gè)方法使用之后比較混亂,它一般不會(huì)在業(yè)務(wù)代碼中使用,經(jīng)常是在組件庫(kù)或者多級(jí)通信,為了方便你可以使用provide。

6、ref

目錄結(jié)構(gòu)

components
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1

代碼結(jié)構(gòu)

ref獲取的是真實(shí)的 dom 元素，如果放到組件上代表的是當(dāng)前組件的實(shí)例。父組件中可以直接獲取子組件的方法或者數(shù)據(jù)。

<template>
  <div>
    <div>爸爸</div>
    <Son1 ref="son"></Son1>
  </div>
</template>
<script>
import Son1 from "./son1";
export default {
  components: { Son1 },
  mounted() {
    this.$refs.son.show();
  },
};
</script>
<template>
  <div>
    <div>兒子</div>
  </div>
</template>
<script>
export default {
  methods: {
    show() {
      console.log(1);
    },
  },
};
</script>

注意事項(xiàng):ref不要重名, 但是當(dāng)且僅當(dāng)使用v-for的時(shí)候會(huì)導(dǎo)致出現(xiàn)數(shù)組情況

7、EventBus

目錄結(jié)構(gòu)

main.js
components
   ├── Grandson1.vue   // 孫子1
   ├── Son2.vue     // 兒子2

代碼結(jié)構(gòu)

EventBus可用于跨組件通知(不復(fù)雜的項(xiàng)目可以使用這種方式)

Vue.prototype.$bus = new Vue();

Grandson1 組件和Son2相互通信

<template>
  <div>孫子1</div>
</template>
<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.$bus.$emit("test", "go");
    });
  },
};
</script>

這里的兒子 2 組件只能使用$on來(lái)觸發(fā) Grandson1 組件事件

<template>
  <div>兒子2</div>
</template>
<script>
export default {
  mounted() {
    this.$bus.$on("test", (data) => {
      console.log(data);
    });
  },
};
</script>

8、Vuex

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。

（推薦微課：Vue 2.x 微課）

文章來(lái)源：公眾號(hào)——小丑的小屋

作者：小丑

以上就是W3Cschool編程獅關(guān)于Vue組件間的8種通訊方式的相關(guān)介紹了，希望對(duì)大家有所幫助。