组件通信

Misaka10032组件通信单双数据流事件通信插槽大约 8 分钟

此处搬运了 12 种基于 vue 框架层面分析通讯方案，以其他方式实现的方案不记录在此

1.单向 props

在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用 props 来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 $emit

<!-- Parent.vue 传送 -->
<template>
  <child :msg="msg"></child>
</template>
<!-- Child.vue 接收 -->
<script>
​export default {
  // 写法一 用数组接收
  props:['msg'],
  //写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
    msg:{
      type:String,
      default:'这是默认数据'
    }
  },
  mounted(){
    console.log(this.msg)
    },
  }
</script>

2.双向 v-model

和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据

<!-- 父组件组件 这个是 v-model:obj="value" -->
<template>
  <div class="">
    <HelloWorld v-model:obj="value"></HelloWorld>
    {{ value }}
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      value: "我是Home里的数据 响应式的",
    };
  },
  components: { HelloWorld },
};
</script>
<!-- ​子组件 -->
<template>
  <input :value="obj" @input="handlerChange" />
</template>
<script>
export default {
  props: ["obj"],
  // 可以修改事件名，默认为 input
  model: {
    event: "updateValue",
  },
  methods: {
    handlerChange(e) {
      // 如果有上面的重命名就是这样
      this.$emit("updateValue", e.target.value);
    },
  },
};
</script>

第二种方式

<!-- 最简单的 v-model实现 父组件 Home -->
<template>
  <div class="">
    <HelloWorld v-model="value"></HelloWorld>
    {{ value }}
  </div>
</template>
​
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      value: "我是Home里的数据 响应式的",
    };
  },
  components: { HelloWorld },
};
</script>
<!-- 子组件 HelloWorld -->
<template>
  <input :value="value" @input="handlerChange" />
</template>
<script>
export default {
  props: ["value"],
  methods: {
    handlerChange(e) {
      // 一定要是 input 事件
      this.$emit("input", e.target.value);
    },
  },
};
</script>

3.sync

可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

<!-- 父组件 Home -->
<template>
  <div class="">
    <HelloWorld :val.sync="val"></HelloWorld>
    {{ val }}
  </div>
</template>
​
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      val: "我是Home里的数据 响应式的",
    };
  },
  components: { HelloWorld },
};
</script>
<!-- ​ 子组件 HelloWorld -->
<template>
  <input class="i911-sync" :value="val" @input="handleInput" />
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    val: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleInput(event) {
      this.$emit("update:val", event.target.value);
    },
  },
};
</script>

4.ref

ref 如果在普通的 DOM 元素上，引用指向的就是该 DOM 元素;

如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

<!-- 父组件 -->
<template>
  <div class="">
    <HelloWorld ref="child"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    const child = this.$refs.child;
    console.log(child.str); // 获取子组件的方法
    child.fn("调用了子组件的方法");
  },
  components: { HelloWorld },
};
</script>
​
<!-- 子组件 -->
<template>
  <input type="text" />
</template>
<script>
export default {
  data() {
    return {
      str: "我是数据",
    };
  },
  methods: {
    fn(e) {
      console.log(e);
    },
  },
};
</script>

5.$emit / v-on

在父组件中给子组件绑定自定义事件，然后调用需要的方法，然后在子组件中用 this.$emit 触发父组件的事件，第一个是事件名第二个是参数

<!-- 父组件 -->
<template>
  <div class="">
    <!-- v-on 简写 @ -->
    <HelloWorld @fn="fn"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    fn(e) {
      console.log("子传父" + e);
    },
  },
  components: { HelloWorld },
};
</script>
​
<!-- 子组件 -->
<template>
  <input type="text" @blur="fn('我是子组件，可以传参数')" />
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 失去焦点发送
    fn(e) {
      this.$emit("fn", e);
    },
  },
};
</script>

6.$attrs / $listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时

$attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"

$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on="$listeners"

<!-- 父组件 -->
<template>
  <div class="">
    <HelloWorld :name="name" val="你好s-z-h"></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      name: "父组件数据",
    };
  },
  components: { HelloWorld },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <input type="text" />
    <!-- 孙组件 -->
    <SunChild v-bind="$attrs"></SunChild>
  </div>
</template>
<script>
import SunChild from "./sun-child.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$attrs); // 可以拿到父组件传来的数据
  },
  components: { SunChild },
};
</script>
<!-- 孙组件 -->
<script>
export default {
  mounted() {
    console.log(this.$attrs);
  },
};
</script>

$listeners 使用

<!-- parent组件 -->
<template>
  <div>
    <Son @eventOne="eventHandler" @click.native="clickHandler" />
  </div>
</template>
<script>
export default {
  methods: {
    eventHandler() {
      console.log("触发了Parent中的eventHandler s-z-h");
    },
    clickHandler() {
      console.log("触发了Parent中的clickHandler");
    },
  },
};
</script>
​
<!-- Son组件 -->
<template>
  <div>
    <!-- 此时Son组件把从父组件传来的监听器，在传给孙组件 -->
    <GrandSon v-on="$listeners" />
  </div>
</template>
<script>
export default {
  mounted() {
    //父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listeners 只有eventOne事件
    console.log(this.$listeners); //{eventOne: fn}
    this.$emit("eventOne"); //可以触发Parent组件中的eventHandler函数
  },
};
</script>
​
<!-- GrandSon组件 -->
<template>
  <div>这是孙组件</div>
</template>
<script>
export default {
  mounted() {
    //这样孙组件通过emit触发Parent组件中的监听函数  让后代组件触发祖先组件
    console.log(this.$listeners); // {eventOne: fn}
    this.$emit("eventOne"); //可以触发Parent组件中的eventHandler函数
  },
};
</script>

7.$children / $parent

$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等

$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

<!-- 父组件 -->
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      name: "父组件数据",
    };
  },
  mounted() {
    this.$children[0].fn(); // 调用第一个子组件的方法
    console.log(this.$children[0].name); // 获取第一个子组件中的属性
  },
  methods: {
    fn() {
      console.log("父组件里的方法 s-z-h");
    },
  },
  components: { HelloWorld },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <input type="text" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "我是子里的数据",
    };
  },
  methods: {
    fn() {
      console.log("我是子组件方法");
    },
  },
  mounted() {
    this.$parent.fn(); // 调用父组件的方法
    console.log(this.$parent.name); // 获取父组件中的属性
  },
};
</script>

8.provide / inject 祖孙通信

provide / inject 为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的

provide：可以让我们指定想要提供给后代组件的数据或方法

inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象

// 父组件 Home
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      val: "父组件数据",
    };
  },
  provide() {
    return {
      name: this.val, // data 的数据
      someMethod: this.someMethod, // methods 中的方法
    };
  },
  methods: {
    someMethod() {
      console.log("这是注入的方法");
    },
  },
  components: { HelloWorld },
};
</script>
<!-- 子组件 HelloWorld -->
<template>
  <div>
    <input type="text" />
    <SunChild></SunChild>
  </div>
</template>
<script>
import SunChild from "./sun-child.vue";
export default {
  data() {
    return {};
  },
  inject: ["name", "someMethod"],
  mounted() {
    console.log(this.name);
    this.someMethod();
  },
  components: { SunChild },
};
</script>
<!-- 孙组件SunChild 也可以拿数据 -->
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  inject: ["name", "someMethod"],
  mounted() {
    console.log(this.name);
    this.someMethod();
  },
};
</script>

9.EventBus 全局事件总线

EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以完成通信

// 找到main.js 加入一下代码  公共的$bus
// 写法一
Vue.prototype.$bus = new Vue();

// 写法二
new Vue({
  beforeCreate() {
    // 全局事件总线
    Vue.prototype.$bus = this;
  },
  render: (h) => h(App),
}).$mount("#app");

<!-- 父组件 也可以兄弟a -->
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$bus.$on("fn", (value) => {
      console.log(value);
    });
  },
  components: { HelloWorld },
};
</script>
<!-- 子组件 也可以兄弟b -->
<template>
  <div>
    <input type="text" @blur="fn" />
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    fn() {
      this.$bus.$emit("fn", "可以父子通信，也可以兄弟通信,s-z-h");
    },
  },
};
</script>

10.vuex 通信

可以定义共享的数据源，在哪里都可以访问 安装配置 使用即可。详细的 vuex 配置见[vuex]

// store.js
// vuex 里定义共享的数据，在哪个组件都可以访问
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import vuexPersist from "vuex-persist";
export default new Vuex.Store({
  state: {
    data: "vuex 的数据",
    a: 1,
    b: 2,
  },
  mutations: {},
  actions: {},
  modules: {},
  getters: {
    num(state) {
      return state.a + state.b;
    },
  },
});

<template>
  <div class="">
    {{ data }}
    {{ num }}
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  // 辅助函数
  computed: { ...mapState(["data"]), ...mapGetters(["num"]) },
  // 第二种 希望你会举一反三
  // computed: {
  //   data() {
  //     return this.$store.state.data;
  //   },
  // },
  components: {},
};
</script>

11.具名插槽+作用域插槽

  1. 具名插槽是在父组件中通过 slot 属性，给插槽命名，在子组件中通过 slot 标签，根据定义好的名字填充到对应的位置。

  2. 作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过 v-slot="value" 来接受数据。

<!-- 父组件 -->
<template>
  <div class="">
    <HelloWorld>
      <template v-slot:a="value">
        <!-- 这个是具名插槽 -->
        <h2>{{ name }}</h2>
        <!--  value 是子组件传过来的数据 -->
        <!-- 这个是作用域插槽 -->
        <h2>{{ value.value }}</h2>
      </template>
    </HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {
      name: "具名插槽 slot插槽传数据 父传子",
    };
  },
  components: { HelloWorld },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <slot name="a" :value="value"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "我是子组件数据 作用域插槽子传父 s-z-h",
    };
  },
  methods: {},
};
</script>

12.$root

$root 可以拿到 App.vue 里的数据和方法

<!-- HelloWorld 子组件添加数据 -->
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // 写入根组件的数据
    this.$root.foo = 2;
  },
  methods: {},
};
</script>

<!-- Home 父组件访问数据 -->
<template>
  <div class="">
    <HelloWorld></HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    // 获取根组件的数据
    console.log(this.$root.foo);
  },
  components: { HelloWorld },
};
</script>