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

This article mainly introduces "what is the way uni-app components communicate". In daily operation, I believe that many people have doubts about the way uni-app components communicate. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what is the way of uni-app components to communicate?" Next, please follow the editor to study!

Uni-app communicates in the same way as vue Mini Program, but syntactically uses vue.

It is mainly divided into father and son: props

The son passes on the father through the abbreviation @ v-on

Brother component Communication uni.$on

First of all, the father passes on the son

Parent component

Import text from "/ assembly/assembly.vue"

Export default {

Data () {

Return {

Imageurl: []

Name: 'child component definition name'

}

}

Components: {

Assembly: text

}

}

Then the subcomponent assembly can get the name through props

The code is as follows

{{name}}

Export default {

Data () {

Return {

}

}

Props: ["name"]

Created () {

Console.log (this.name)

}

}

It is important to note that props in vue is a large object, while in uni we need to use an array of strings to connect.

Then, if the child passes on the parent, the child component needs to call the event passed to itself by the parent component and pass parameters.

Parent component

Import text from "/ assembly/assembly.vue"

Export default {

Data () {

Return {

Imageurl: []

Name: 'child component definition name'

}

}

Components: {

Assembly: text

}

Methods: {

Getname (name) {

Console.log (name)

}

}

}

At this point, we define a getname method and pass it to the subcomponent, accept a parameter and print it out.

Then we call him in the subcomponent

{{name}}

Export default {

Data () {

Return {

}

}

Props: ["name"]

Created () {

Console.log (this.name)

}

Methods: {

Getname () {

This.$emit ('value passed by the getname',' child component to the parent component')

}

}

}

When we click view, we trigger the child component's own getname and then call the getname method from the parent component in this method and pass the parameters

Then the brother component passes the value.

For example, one of our parent components references both texta and textb as its own child components.

And then we can write in texta.

{{name}}

Export default {

Data () {

Return {

Name: 'initial value'

}

}

Created () {

Uni.$on ('bingdts',res= > {)

This.name = res

})

}

}

At this point, we, component A, define a bingdts method, and then we can call this method and pass parameters through component B.

Writing method of textb component

{{name}}

Export default {

Data () {

Return {

Name: "modify sibling value"

}

}

Methods: {

Getname () {

Uni.$emit ('bingdts',111)

}

}

}

Then you will find that the method of textb triggers the call to the bingdts parameter of texta, and the sibling component passes the value.

At this point, the study on "how uni-app components communicate" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.