一.Props傳遞數(shù)據(jù)

components
   ├── Grandson1.vue // 孫子1
   ├── Grandson2.vue // 孫子2
   ├── Parent.vue   // 父親
   ├── Son1.vue     // 兒子1
   └── Son2.vue     // 兒子2

在父組件中使用兒子組件

<template>
 <div>
  父組件:{{mny}}
  <Son1 :mny="mny"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

子組件接受父組件的屬性
子組件1:

二.$emit使用

子組件觸發(fā)父組件方法,通過回調(diào)的方式將修改的內(nèi)容傳遞給父組件

<template>
 <div>
  父組件:{{mny}}
  <Son1 :mny="mny" @input="change"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 methods: {
  change(mny) {
   this.mny = mny;
  }
 },
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

子組件觸發(fā)綁定自己身上的方法

<template>
 <div>
  子組件1: {{mny}}
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  mny: {
   type: Number
  }
 }
};
</script>

這里的主要目的就是同步父子組件的數(shù)據(jù) -> 語法糖的寫法

.sync

<Son1 :mny.sync="mny"></Son1>
<!-- 觸發(fā)的事件名 update:(綁定.sync屬性的名字) -->
<button @click="$emit('update:mny',200)">更改</button>

v-model

<Son1 v-model="mny"></Son1>
<template>
 <div>
  子組件1: {{value}} // 觸發(fā)的事件只能是input
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: { // 接收到的屬性名只能叫value
   type: Number
  }
 }
};
</script>

三. parent、children

繼續(xù)將屬性傳遞

<Grandson1 :value="value"></Grandson1>
<template>
 <div>
  孫子:{{value}}
  <!-- 調(diào)用父組件的input事件 -->
  <button @click="$parent.$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: {
   type: Number
  }
 }
};
</script>

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

$dispatch

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

既然能向上派發(fā)那同樣可以向下進(jìn)行派發(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);
};

四.attrs、listeners

$attrs

批量向下傳入屬性

<Son2 name="小珠峰" age="10"></Son2>

<!-- 可以在son2組件中使用$attrs屬性,可以將屬性繼續(xù)向下傳遞 -->
<div>
  兒子2: {{$attrs.name}}
  <Grandson2 v-bind="$attrs"></Grandson2>
</div>


<template>
 <div>孫子:{{$attrs}}</div>
</template>

$listeners

批量向下傳入方法

<Son2 name="小珠峰" age="10" @click="()=>{this.mny = 500}"></Son2>
<!-- 可以在son2組件中使用listeners屬性,可以將方法繼續(xù)向下傳遞 -->
<Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2>

<button @click="$listeners.click()">更改</button>

五.Provide & Inject

Provide

在父級中注入數(shù)據(jù)

provide() {
  return { parentMsg: "父親" };
},

Inject

在任意子組件中可以注入父級數(shù)據(jù)

inject: ["parentMsg"] // 會將數(shù)據(jù)掛載在當(dāng)前實(shí)例上

六.Ref使用

獲取組件實(shí)例

<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
mounted() { // 獲取組件定義的屬性
  console.log(this.$refs.grand2.name);
}

七.EventBus

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

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

Son2組件和Grandson1相互通信

mounted() {
  this.$bus.$on("my", data => {
   console.log(data);
  });
 },

mounted() {
  this.$nextTick(() => {
   this.$bus.$emit("my", "我是Grandson1");
  });
 },

八.Vuex通信

狀態(tài)管理

image