The method of Vue father-son transmission

This article introduces the knowledge of "the method of Vue father-son transmission". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Implement the function:

1. The input input of the child component to change the parent component information

2. The parent component monitors and controls the child component 1Power3.

3. Subcomponent 1 and subcomponent 3 are related to each other

Father-son two-way communication process:

The input of the child component controls the variables in the data of the child component through event listening-> to the parent component $emit child events and variables

The parent component listens to the $emit event and variables, and the variables assigned to the parent component are passed to the child component through props

Props: {{pnumber1}} child-data: {{dnumber1}} props: {{pnumber3}} child-data: {{dnumber3}} var app = new Vue ({el: "# app", data () {return {/ / default values in the parent component database num1:11, num3:31,}}, methods: {/ / listen event, pass the dnumber1 from the child component to num1 The value passed from num1 to pnumber1 recdnum1 (value) {/ / is String by default, and converted to Int or Float this.num1 = parseInt (value) as needed. }, recdnum3 (value) {this.num3=parseFloat (value) }, components: {cnp: {template: "# mytemp", props: {pnumber1: {/ / default props data format and default value type:Number, default:1}, pnumber3: {type:Number, default:3}}, data () {return {/ / assign the props value to the variable dnumber1:this.pnumber1 in data Dnumber3:this.pnumber3}}, methods: {num1input (event) {/ / pass the values in input to dnumber1 this.dnumber1 = event.target.value / / emit the event num1change to the parent component and send out the dnumber1 data this.$emit ("num1change", this.dnumber1); / / bind the relevance of the pnumber3 value this.dnumber3=this.dnumber1*5; / / emit the pnumber3 information this.$emit ("num3change", this.dnumber3) to the parent component;}, num3input (event) {this.dnumber3= event.target.value This.$emit ("num3change", this.dnumber3)},}); "the method of Vue father-son transmission" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!