返回文章

vue 组件通信的 6 种方式

props/$emit eventBus $attrs/$listeners provide/inject $ref vuex demo 地址 定义父子关系 a.vue 是父组件，b.vue 是 a.vue 的子组件，c.vue 和 d.vue 是兄弟组件，是 b.vue 的子组件 props/$emit a.vue b.vue 实现效果 eventBus vue1.x 的 API， bus.js…

  1. props/$emit
  2. eventBus
  3. $attrs/$listeners
  4. provide/inject
  5. $ref
  6. vuex

定义父子关系

定义父子关系

a.vue 是父组件，b.vue 是 a.vue 的子组件，c.vue 和 d.vue 是兄弟组件，是 b.vue 的子组件

props/$emit

父子组件通信

  • a.vue
<template>
  <div class="">
    我是<span class="mine">a</span>、来自b的数据 <span class="data">{{ b2a }}</span>
    <B :a2b="a2b" @bSendA="bSendA"></B>
  </div>
</template>
<script>
import B from "@/components/b";
export default {
  components: {
    B
  },
  data() {
    return {
      a2b: "a->b",
      b2a: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    bSendA(data) {
      this.b2a = data;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>
  • b.vue
<template>
  <div class="">
    我是<span class="mine">b</span> 有来自a的数据 <span class="data">{{ a2b }}、</span>、<span class="mine" @click="bSendA">点我可向a传参</span>
  </div>
</template>
<script>
import C from "@/components/c";
import D from "@/components/d";
export default {
  props: {
    a2b: String
  },
  components: {
    C,
    D
  },
  data() {
    return {
      ref_a2b: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    bSendA() {
      this.$emit("bSendA", "b->a");
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>

实现效果

props/$emit

eventBus

vue1.x 的 API，兄弟组件通信

  • bus.js
import Vue from "vue";
export default new Vue();
  • c.vue
<template>
  <div class="">我是<span class="mine">c</span>、<span class="mine" @click="cSendD">点我可向d传参</span></div>
</template>
<script>
import Bus from "@/components/bus.js";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    cSendD() {
      Bus.$emit("c-d", "c->d");
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>
  • d.vue
<template>
  <div class="">
    我是<span class="mine">d</span>、来自c的数据 <span class="data">{{ c2d }}</span>
  </div>
</template>
<script>
import Bus from "@/components/bus.js";
export default {
  components: {},
  data() {
    return {
      c2d: ""
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    Bus.$on("c-d", (data) => {
      this.c2d = data;
    });
  }
};
</script>
<style lang="css" scoped></style>

实现效果

eventBus

$attrs/$listeners

vue2.5 的 API，父->子->孙组件通信，其中子组件只做数据传递

$attrs：没有被子组件注册的prop，$listeners：子组件可以触发父组件的非.native 事件

  • a.vue
<template>
  <div class="">
    我是<span class="mine">a</span>、来自b listener的数据 <span class="data">{{ blistena }}</span>
    <B :a2b2c="`a->c`" @click="bListenA" v-on="$listeners"></B>
  </div>
</template>
<script>
import B from "@/components/b";
export default {
  components: {
    B
  },
  data() {
    return {
      blistena: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    bListenA() {
      this.blistena = "blistena";
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>
  • b.vue
<template>
  <div class="">
    我是<span class="mine">b</span>
    <C v-bind="$attrs"></C>
  </div>
</template>
<script>
import C from "@/components/c";
export default {
  // inheritAttrs:false，不会把未被注册的 prop 呈现为普通的 HTML 属性 ，也就是:prop="data"  prop不会作为html的新属性
  inheritAttrs: false,
  components: {
    C
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    this.$emit("click");
  }
};
</script>
<style lang="css" scoped></style>
  • c.vue
<template>
  <div class="">
    我是<span class="mine">c</span>有来自a的数据 <span class="data">{{ $attrs.a2b2c }}</span>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>

实现效果

$attrs/$listeners

provide/inject

vue2.2 的 API，父->子、父->孙组件通信，其中 Vue.observable()可以把注入的依赖变成响应式

  • a.vue
<template>
  <div class="">
    我是<span class="mine">a</span>
    <B></B>
  </div>
</template>
<script>
import B from "@/components/b";
export default {
  // Vue.observable()把传入的引用类型变成响应式数据
  provide: {
    a2d: "a->d"
  },
  components: {
    B
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>
  • d.vue
<template>
  <div class="">
    我是<span class="mine">d</span>、来自a的数据 <span class="data">{{ a2d }}</span>
  </div>
</template>
<script>
export default {
  inject: ["a2d"],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>

实现效果

provide/inject

$ref

父子组件通信

  • a.vue
<template>
  <div class="">
    我是<span class="mine">a</span>
    <B ref="b"></B>
  </div>
</template>
<script>
import B from "@/components/b";
export default {
  components: {
    B
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    this.$refs.b.aSendB("ref的a->b");
  }
};
</script>
<style lang="css" scoped></style>
  • b.vue
<template>
  <div class="">
    我是<span class="mine">b</span> 有来自a中用ref传的数据 <span class="data">{{ ref_a2b }}</span>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      ref_a2b: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    aSendB(data) {
      this.ref_a2b = data;
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="css" scoped></style>

实现效果

$ref

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态

vuex 的原理与使用

vue 源码学习第 28 天：vuex 的初始化：安装与 Store 实例化过程

vuex 的 API 、插件和对 vuex 的一些思考

暂无评论