Detailed explanation of non-parent-child component communication in Vue3

The business scenario is that it is not the parent-child components that communicate

File Directory

First method

App.vue

<template>
  <div>
    <Home></Home>
    <button @click="addName">Add name</button>
  </div>
</template>
 <script>
import Home from "./Home.vue";
import { computed } from "vue";
export default {
  name: "App",
  components:
    Home,
  },
  provide() {
    return {
      name: "Zhang San",
      age: 23,
      length: computed(() => this.names.length),
    };
  },
  data() {
    return {
      names: ["Zhang San", "Li Si", "Wang Wu"],
    };
  },
  methods: {
    addName() {
      this.names.push("fuck you");
      console.log("hhhh");
    },
  },
};
</script>
 <style scoped>
</style>

Home.vue

<template>
  <div>
    <div>I am home</div>
    <home-content></home-content>
  </div>
</template>
 <script>
import HomeContent from "./HomeContent.vue";
export default {
  name: "Home",
  components:
    HomeContent,
  },
};
</script>
 <style scoped>
</style>

HomeContent.vue

<template>
  <div>HomeContent:{{ name }}--{{ age }}---{{ length }}</div>
</template>
 <script>
export default {
  inject: ["name", "age", "length"],
};
</script>
 <style lang="scss" scoped>
</style>

Use Provide function and Inject function in vue3

In fact, we have learned Provide and Inject before. Composition API can also replace the previous Provide and Inject options.

We can provide data through provide:

Provide can pass in two parameters:

name : the provided attribute name;

value : the attribute value provided;

In the descendant components, you can use inject to inject the required properties and corresponding values:

You can use inject to inject the required content;

Inject can pass in two parameters:

The name of the property to be injected;

default value;

Responsiveness of data

To add responsiveness between provided values ​​and injected values, we can use ref and reactive when providing values.

Modifying Responsive Properties

If we need to modify responsive data, it is best to modify it where the data is provided: we can share the modification method and call it in descendant components;

Notice

If our subcomponent should be a state that can only be used and cannot be modified

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!