What is non-parent-child component communication
This article mainly explains "what is non-parent-child component communication". Friends who are interested may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is non-parent-child component communication"!
Catalogue
App.vue
Home.vue
HomeContent.vue
Responsive form of data
Modify responsive Property
The business scenario is that it is not the parent-child components that communicate.
File directory
App.vue adds the name 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");},},}; Home.vue I am home import HomeContent from ". / HomeContent.vue" Export default {name: "Home", components: {HomeContent,},}; HomeContent.vue HomeContent: {{name}}-{{age}}-- {{length}} export default {inject: ["name", "age", "length"],},}
Using Provide function and Inject function in vue3
In fact, we have learned before that Provide and Inject,Composition API can also replace the previous options of Provide and Inject.
We can provide data through provide:
Provide can be passed in two parameters:
Name: the attribute name provided
Value: property values provided
You can inject the desired attributes and corresponding values through inject in the descendant components:
You can inject what you need through inject
Inject can be passed in two parameters:
The name of property to inject
Default value
Responsive form of data
To increase the responsiveness between provide values and inject values, we can use ref and reactive for provide values.
Modify responsive Property
If we need to modify responsive data, it is best to do so where the data is provided: we can share the modified method and call it in future components
Be careful
If our subcomponents should be in a state that can only be used and cannot be modified
At this point, I believe you have a deeper understanding of "what is non-parent-child component communication". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
