Detailed explanation of non-parent-child component value transfer in Vue3

App.vue
sub1.vue
sub2.vue
Summarize

The value transmission of non-parent-child components in vue2 is mainly through the event bus, creating a vue instance, and implementing the communication behavior between non-parent-child components by importing the instance in different components.
Vue3 provides **provide** and **inject** properties, which can realize communication between non-parent-child components;
Suppose there are three components: App.vue (parent), sub1 (child), sub2 (child of child):

App.vue

<template>
  <div style="border: 1px solid pink">
    <h1>I am your father</h1>
    👇
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
	export default {
		name: "App",
    components:{
			sub1,
    },
    provide:{ // Define provide in the parent component to declare the value to be passed names:['peanut','javascriptKing']
    }
	}
</script>
<style scoped>
</style>

sub1.vue

<template>
  <h2>I am a first-level child component</h2>
  👇
  <sub2/>
</template>
<script>
  import sub2 from "./sub2";
	export default {
		name: "sub1",
    components:{
			sub2,
    }
	}
</script>
<style scoped>
</style>

sub2.vue

<template>
  <h3>I am the youngest, the grandson</h3>
  <div>I referenced the names array of the top-level component ===> {{names}}</div>
</template>
<script>
	export default {
		name: "sub2",
    // Accept a cross-level value in the child component through inject:['names'],
	}
</script>
<style scoped>
</style>

The implementation effect is as follows, you can see that the value passed in the top-level component can be obtained normally:

insert image description here

But there are also problems:

That is, when the value that the top-level component wants to pass changes, how can we make it responsive?

How to get the current instance through this in the provide property?

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

<template>
  <div style="border: 1px solid pink">
    <h1>I am your father</h1>
    👇
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
	export default {
		name: "App",
    data(){
			return {
				names:['peanut','javascriptKing']
      }
    },
    components:{
			sub1,
    },
    /*Writing this way will not get this. At this time, this only means that the scope this in the script is undefined*/
    /*provide:{
			this.names,
    }*/
  // Should be written like this provide(){
    	return {
    		names:this.names
      }
    }
	}
</script>
<style scoped>
</style>

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

<template>
  <div style="border: 1px solid pink">
    <h1>I am your father</h1>
    👇
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
  import { computed } from 'vue'
	export default {
		name: "App",
    data(){
			return {
				names:['peanut','javascriptKing']
      }
    },
    components:{
			sub1,
    },
    /*Writing this way will not get this. At this time, this only means that the scope this in the script is undefined*/
    /*provide:{
			this.names,
    }*/
  // Should be written like this provide(){
    	return {
    		names:computed(() =>{ this.names.length }) // Use the calculated property to return the variable so that names forms a dependency relationship with the names in data}
    },
    mounted() {
    	setInterval(()=>{
    		this.names.push('vue king!')
      },1000)
    }
	}
</script>
<style scoped>
</style>

Summarize

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

You may also be interested in:

Detailed explanation of several ways to communicate and pass values between components in Vue
How do you know how to pass values between Vue components?
Detailed explanation of value transfer between parent and child components in Vue3
Detailed explanation of Vue parent-child component value transfer and one-way data flow issues
A brief discussion on value transfer between Vue components (including Vuex)
Super simple and easy to understand vue component value transfer

<<: How to strike a balance between ease of use and security in the login interface

>>: A brief analysis of the underlying principles of MySQL transactions and isolation levels