Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.