Shulou(Shulou.com)05/31 Report--

In this article Xiaobian introduces in detail how to communicate between vue father and son components, the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to communicate between vue father and son components" can help you solve your doubts.

How to solve the communication between components? Solution:

You can use the parent component to transfer data to the child component, and the child component can also transfer data to the parent component. For short, the father passes on the son, and the son passes on the father.

The following details how the parent component passes data to the child component.

Father passes on son

Theory: if one component An introduces and uses another component B, then component An is the parent component and component B is the child component.

Implementation process:

1. Import subcomponents in the parent component, register subcomponents, and use subcomponents 2. Customize an attribute on the child component tag in the parent component. On the left is the defined name, and on the right is the data in the parent component, such as 3. In a child component, use prpos to receive data from the parent component, such as: prpos: ['list'] Note that the name in this must be consistent with the name defined by the parent component.

Principle diagram

Parent component Footer.vue

Customize an attribute on the child component tag in the parent component

Parent component passes child component / / incoming component-- > create component-- > use component / / incoming component import MyCon from ". / MyCon.vue"; export default {/ / create component components: {MyCon}, / / data data () {return {name: "Zhang San", age: 38,};},},}

Sub-component MyCon.vue

Use prpos to receive data from the parent component in the child component

Subcomponents / / are used directly in the tag

{{name}} {{age}}

Click to modify the value of props export default {/ / child component to receive data from parent component props: ["name", "age"], methods: {fn () {this.name = "stupid Tan Lei"; this.age = 20},},}

In the small case, the father is passed on to the son.

Parent component App.vue

Parent component / / Import-> Register-> use import MyProduct from ". / MyProduct.vue" Export default {data () {return {list: [{id: 1, proname: "Super delicious lollipop", proprice: 18.8, info: "opening ceremony, 20% discount",}, {id: 2, proname: "Super delicious drumsticks" Proprice: 34.2, info: "delicious, come and buy it",}, {id: 3, proname: "Super invincible ice cream", proprice: 14.2, info: "Hot summer, have an ice cream",},],} }, components: {MyProduct},}

Sub-component MyProduct.vue

Title: {{goodname}}

Price: {{price}} yuan

{{info}}

Export default {props: ["goodname", "price", "info"],}

Effect display

A son inherits his father.

Realization process

1. Import subcomponents in the parent component, register subcomponents, and use subcomponents 2. Add an event listener to the child component tag of the parent component, for example: 3. This custom listening event is triggered in the subcomponent. For example: this.$emit ("abc", parameter)

Principle diagram

Parent component App.vue

Add an event monitoring parameter to the child component tag of the parent component to receive data

Parent component / / import child component import MyCon from ". / MyCon.vue"; export default {methods: {/ / formal parameter receiving fn (obj) {/ / print to see if console.log ("abc event occurred in fn", obj);},}, components: {MyCon},}

Sub-component MyCon.vue

Trigger this custom listening event in the subcomponent

The child passes the parent export default {methods: {ConFn () {console.log ("child component click"); / / 2. Trigger abc event this.$emit ("abc", {name: "hanging hair Tan Lei"});},},}

The commodity case uses the son to pass on the father.

Parent component App.vue

Parent component / / Import-> Register-> use import MyProduct from ". / MyProduct.vue" Export default {data () {return {list: [{id: 1, proname: "Super delicious lollipop", proprice: 18.8, info: "opening ceremony, 20% discount",}, {id: 2, proname: "Super delicious drumsticks" Proprice: 34.2, info: "delicious, come and buy it",}, {id: 3, proname: "Super invincible ice cream", proprice: 14.2, info: "Hot summer, have an ice cream",},],} }, components: {MyProduct}, methods: {fn (obj) {console.log ("parent component, received a pdd event", obj); / / calculate and re-assign this.list [obj.idx] .proprice-= obj.ran;},},}

Sub-component MyProduct.vue

Title: {{goodname}}

Price: {{price}} yuan

{{info}}

Random bargain export default {/ / receive props: ["goodname", "price", "info", "idx"], methods: {bargain () {/ / Random number const ran = Math.ceil (Math.random () * 10) / / trigger a custom event / / in order to know which item wants to reduce the price, return the idx subscript this.$emit ("pdd", {idx: this.idx, ran});},},}

Effect display

After reading this, the article "how to communicate between vue father and son components" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.