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

This article will explain in detail how to achieve two-way data binding between parent and child components in Vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The idea of realization is:

Parent passes values to child components: use the props attribute. (props is the plural abbreviation of property [attribute])

Children pass values to parent components: use custom events.

1. Parent-child components pass values one-way. 1. Parents pass values to children

The parent passes a value to the child component, and after the child component receives the data, it saves it in its own variable.

/ / parent component definition and data components: {cld: {template:'#child', props: {numP:Number},}} / / Child component content {{numP}}

Props is used to receive values passed by the parent component. Props can be written in many ways, such as:

/ / method 1: directly receive data props: ['numP'] / / method 2: add type restriction props: [numP: Number] / / method 3: add default value props: [numP: {type:Number, default:0}] / / method 4: whether it is necessary to limit props: [numP: {type:Number, default:0, require:true / / add a required value Error will be reported if you do not pass this value] / / method 5: props: {numP: {type:Number, default:0,}} 2. Pass the value from the child to the parent.

The child passes the value to the parent component, mainly through custom events. Specific examples are as follows:

/ / data obtained by parent component content child component {{getNum}} / / parent component method methods: {getNumC (data) {this.getNum = data / / receive data from child component}}, / / child component definition components: {cld: {template:'#child', data () {return {numC:1314 / / child component data definition}} Mounted () {this.$emit ('accept', this.numC) / / trigger custom event}, two-way data binding of parent and child components

The data in Vue flows one-way, and there is never any two-way binding in vue, and the two-way binding implemented by v-model is just syntax sugar.

Method 1: use watch to realize bidirectional data binding between parent and child components. Specific examples are as follows:

data

{{num}}

/ / Sub-component content data

{{childNum}} const app = new Vue ({el:'#app', data: {num:'520',}, methods: {getNumC (data) {this.num = data}}, components: {cld: {template:'#child', props: {numb:String}, data () {return {childNum:0,}} Watch: {numb:function () {this.childNum = this.numb}, childNum:function () {this.$emit ('accept',this.childNum)}}, mounted () {this.childNum = this.numb}})

Mode 2:.sync modifier to achieve two-way binding

The functionality provided by the .sync modifier in vue 1.x. When a child component changes the value of a prop with .sync, the change is also synchronized to the value bound in the parent component. This is convenient, but it can also cause problems because it destroys one-way data flow. (data from top to bottom, events from bottom to top)

/ / will be expanded to:

When the component needs to update the value of numb, the update event needs to be triggered:

This.$emit ("update:numb", newValue)

Specific examples are as follows:

/ / parent component / / Child component props: ['foo'], data () {return {newFoo: this.foo;}}, methods: {add:function () {this.newMsg=10; this.$emit (' update:foo',this.newFoo) }} this is the end of the article on "how to achieve two-way data binding between parent and child components in Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.