父子組件的通信是開發(fā)是最常用的也是最重要的

二級(jí)標(biāo)題你們一定知道父子通信是用prop傳遞數(shù)據(jù)的

父組件

<template>
    <div>
        <!-- 將數(shù)據(jù)綁定到了組件的msg上 -->
        <EmitSon :msg="msg"/>
    </div>
</template>
<script>
import EmitSon from './childs/EmitSon'
export default {
    name: 'EmitInfor',
    data() {
        return {
            msg: '父向子傳參-props'
        }
    },
    components: {
        EmitSon
    }
}
</script>

子組件

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
export default {
    name: 'EmitSon',
    props: ['msg']
}
</script>

子組件向父組件

父組件

<template>
  <div>
    <EmitSon @infor="getInfor" />
    {{msg}}
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      msg: ""
    };
  },
  components: {
    EmitSon
  },
  methods: {
    getInfor(val) {
      this.msg = val;
    }
  }
};
</script>

子組件

<template>
  <div>
    <button @click="postInfor">向父組件發(fā)送信息</button>
  </div>
</template>
<script>
export default {
  name: "EmitSon",
  methods: {
    postInfor() {
      this.$emit("infor", "您好奥帘，父組件");
    }
  }
};
</script>

同級(jí)組件通信

1. 需要有一輛通信車 eventBus

中央事件總線的方式: 新建一個(gè)Vue事件bus對(duì)象防楷，然后通過bus.on監(jiān)聽觸發(fā)的事件躲叼。

/lib/bus.js

import Vue from 'vue';
export default new Vue;

main.js

import eventBus from './lib/bus'
Vue.prototype.$eventBus = eventBus;

發(fā)送信息的一方

<template>
  <div>
    <button @click="postInfor">向同級(jí)組件發(fā)送信息</button>
  </div>
</template>
<script>
export default {
  name: "EmitSon2",
  methods: {
    postInfor() {
      this.$eventBus.$emit("bortherInfor", "您好簸州，大哥組件");
    }
  }
};
</script>

接收信息的一方

<template>
  <div>
    接收同級(jí)組件的信息： {{msg}}
  </div>
</template>
<script>
export default {
  name: "EmitSon",
  data() {
      return {
          msg: ''
      }
  },
  mounted() {
      this.$eventBus.$on('bortherInfor', val => {
          this.msg = val;
      });
  }
};
</script>

深層組件嵌套祖先與子組件通信(listener)

Vue 2.4開始提供了: listener

祖先組件

<template>
  <div>
    <EmitSon :msgc="msgc" @changeMsgc="changeMsgc"/>
    <h1>{{msgc}}</h1>
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      msgc: "hello C組件"
    };
  },
  components: {
    EmitSon
  },
  methods: {
      changeMsgc(val) {
          this.msgc = val;
      }
  }
};
</script>

第一層組件嵌套

<template>
  <div>
    <!-- 接收同級(jí)組件的信息： {{msg}} -->
    <EmitSon2 v-bind="$attrs" v-on="$listeners" />
  </div>
</template>
<script>
import EmitSon2 from "./EmitSon2";
export default {
  name: "EmitSon",
  data() {
      return {
          msg: ''
      }
  },
  components: {
      EmitSon2
  },
  mounted() {
      this.$eventBus.$on('bortherInfor', val => {
          this.msg = val;
      })
  }
};
</script>

第二層組件嵌套

<template>
  <div>
    <input type="text" v-model="$attrs.msgc" @input="postMsg($attrs.msgc)">
    <EmitSon3 v-bind="$attrs" v-on="$listeners"/>
  </div>
</template>
<script>
import EmitSon3 from "./EmitSon3";
export default {
  name: "EmitSon2",
  methods: {
    postMsg(val) {
        this.$emit('changeMsgc', val)
    }
  },
  components: {
      EmitSon3
  }
};
</script>

第三層組件嵌套

<template>
  <div>
      <input type="text" v-model="$attrs.msgc" @input="postMsg($attrs.msgc)">    
                                                      <!-- @input="changeInp" -->
  </div>
</template>
<script>
export default {
  name: "EmitSon3",
  methods: {
    postMsg(val) {
        this.$emit('changeMsgc', val)
    }


    // changeInp(event) {
    //         console.log(event);
    //         this.$emit('changemsg', event.target.value);
    // }
  }
};
</script>

5. provide與inject

父組件中通過provider來提供變量乖菱，然后在子組件中通過inject來注入變量代芜。不論子組件有多深退子，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)
只要在父組件的生命周期內(nèi)，子組件都可以調(diào)用

父組件

<template>
  <div>
    <EmitSon />
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      msgc: ""
    };
  },
  components: {
    EmitSon
  },
  provide: {
      information: 'provide的方法'
  }
};
</script>

子組件

<template>
  <div>{{information}}</div>
</template>
<script>
export default {
  name: "EmitSon",
  data() {
    return {
      msg: ""
    };
  },

  inject: ["information"]
};
</script>

6. children

父組件

<template>
  <div>
    <EmitSon />

    {{message}}
    <button @click="changeChild">changeChild</button>
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      message: 0
    };
  },
  components: {
    EmitSon
  },
  methods: {
      changeChild() {
          this.$children[0].message += 100;
      }
  },
  provide: {
      information: 'provide的方法'
  }
};
</script>

子組件

<template>
  <div>
    {{information}}
    {{message}}
    <button @click="changeParent">改變父組件數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  name: "EmitSon",
  data() {
    return {
      message: 0
    };
  },
  methods: {
    changeParent() {
      this.$parent.message += 50; 
    }
  },
  inject: ["information"]
};
</script>

7. vuex