How to pass values from non-parent-child components in vue3

Editor to share with you how to pass values on non-parent-son components in vue3. I hope you will get something after reading this article. Let's discuss it together.

The value of non-parent-child components in vue2 is mainly through the event bus to create a vue instance, and the communication behavior between non-parent-child components is realized by importing the instance in different components. Vue3 provides * * provide** and * * inject** attributes to enable communication between non-parent and child components. Suppose there are three components: App.vue (parent), sub1 (child), and sub2 (child): App.vue, I am your father. Import sub1 from'. / sub1' export default {name: "App", components: {sub1,}, provide: {/ / declare the value to be passed by defining provide in the parent component: names: ['peanut','javascriptKing']}} sub1.vue I am a first-level child component. Import sub2 from ". / sub2" Export default {name: "sub1", components: {sub2,}} sub2.vue I am the youngest That is, Sun Tzu, I refer to the names array of the top-level component = = > {{names}} export default {name: "sub2", / / accept a cross-level passed value inject: ['names'],} in the child component through inject

The implementation effect is as follows. You can see that the values passed in the top-level component can be obtained normally:

But there can also be problems:

When the value to be passed by the top-level component changes, how do you make it responsive?

How do I get the current instance through this in the provide property?

Here, you need to write the provide property as a method and return an array or object:

I'm your father. Import sub1 from'. / sub1' export default {name: "App", data () {return {names: ['peanut','javascriptKing']}}, components: {sub1,} / * if you can't get the this, the this only wants the scope this in the script to be undefined*/ / * provide: {this.names,} * / should write provide () {return {names:this.names}.

As written above, although you can get the data under the instance pointed to by this, how do you make them form dependencies and achieve responsiveness? To do this, we need to make the following changes to App.vue:

I'm your father. Import sub1 from'. / sub1' import {computed} from 'vue' export default {name: "App", data () {return {names: [' peanut','javascriptKing']}}, components: {sub1,} / * if you write this way, you can't get the this. The this only wants the scope this in the script to be undefined*/ / * provide: {this.names. } * / / should write provide () {return {names:computed (() = > {this.names.length}) / / return this variable using the calculation attribute to make names dependent on the names in data}} Mounted () {setInterval (()) = > {this.names.push ('King vue!') }, 1000)}} after reading this article, I believe you have a certain understanding of "how to transmit the value of non-parent-son components in vue3". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!