Vue2.0使用总结-组件间通讯

父子组件通讯

Parent.vue

<template>
  <div>
    <h2>parent</h2>
    <div>msg: {{ msg }}</div>
    <Child :name="1"  @onMsg="onMsg" />
  </div>
</template>
<script>
import Child from "./Child";

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

Child.vue

<template>
  <div>
    <h2 @click="click">Child{{ name }}</h2>
  </div>
</template>
<script>
export default {
  props: ["name"],
  methods: {
    click() {
      this.$emit("onMsg", "子组件传递消息");
    }
  }
};
</script>

兄弟组件

兄弟组件通讯依靠父组件中转

后代组件通讯

(不推荐在平常的项目中使用)

provide & inject

Ancestors.vue

<template>
  <div class="component">
    <h2>ancestors</h2>
    <Child />
  </div>
</template>
<script>
import Child from "./Child";

export default {
  components: { Child },
  provide: {
    provide: "ancestors"
  }
};
</script>

...n个children

Offspring.vue

<template>
  <div>
    <h2>offspring</h2>
    <div>{{ provide }}</div>
  </div>
</template>
<script>
export default {
  inject: ["provide"]
};
</script>

dispatch & boardcast

dispatch自下而上通知,boardcast自上向下递归传递

main.js

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

Vue.prototype.$boardcast = function(eventName, data) {
  boardcast.call(this, eventName, data);
};

function boardcast(eventName, data) {
  this.$children.forEach(child => {
    child.$emit(eventName, data);
    if (child.$children.length) {
      boardcast.call(child, eventName, data);
    }
  });
}

Parent.vue

<template>
  <div class="component">
    <h2>Parent: {{ msg }}</h2>
    <Child />
  </div>
</template>
<script>
import Child from "./Child";

export default {
  components: { Child },
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.$on("msg", msg => {
      this.msg = msg;
    });
  }
};
</script>

Child.vue

<template>
  <div>
    <div>Child1</div>
    <Child />
  </div>
</template>
<script>
import Child from "./Child2.vue";
export default {
  components: { Child }
};
</script>

Child2.vue

<template>
  <div>
    <div @click="click">Child2: {{ msg }}</div>
    <Child />
  </div>
</template>
<script>
import Child from "./Child3";
export default {
  components: { Child },
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.$on("msg", msg => {
      this.msg = msg;
    });
  },
  methods: {
    click() {
      this.$boardcast("msg2", "来自Child2的消息: Click");
    }
  }
};
</script>
</script>

Child3.vue

<template>
  <div>
    <div @click="click">Child3: {{ msg }}</div>
    <Child />
  </div>
</template>
<script>
import Child from "./Child4";
export default {
  components: { Child },
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.$on("msg2", msg => {
      this.msg = msg;
    });
  },
  methods: {
    click() {
      this.$dispatch("msg", "来自Child3的消息：Click");
    }
  }
};
</script>

eventbus

main.js

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

Parent.vue

<template>
  <div class="component">
    <h2 @click="eventClick">Parent: {{ msg }}</h2>
    <Child />
  </div>
</template>
<script>
import Child from "./Child";

export default {
  components: { Child },
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.$bus.$on("bus_msg", msg => {
      this.msg = msg;
    });
  },
  methods: {
    eventClick() {
      this.$bus.$emit("bus_msg", "来自Parent的消息: Click");
    }
  }
};
</script>

Child.vue

<template>
  <div>
    <div @click="eventClick">Child1: {{ msg }}</div>
    <Child />
  </div>
</template>
<script>
import Child from "./Child2.vue";
export default {
  components: { Child },
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.$bus.$on("bus_msg", msg => {
      this.msg = msg;
    });
  },
  methods: {
    eventClick() {
      this.$bus.$emit("bus_msg", "来自Child1的消息: Click");
    }
  }
};
</script>

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。