Vue .sync modifier use details

Vue’s official website introduction is very good, read first.

2.3.0+ New

In some cases, we may need “two-way binding” to a PROP. Unfortunately, the true two-way binding will bring maintenance problems because subcomponents can modify the parent components and have no significant changes in parent components and submastries.

This is also why we recommend that the

Update: my-prop-name

is replaced. For example, in a component containing the assumption of Title PROP, we can express the intent to assign new values ​​in the following method:

this. $ EMIT (‘update: title’, newtitle

The parent component can then listen to that event and update a local data attribute as needed. For example:

   For convenience, we provide an abbreviation for this mode即. Sync modifier:   

When we use an object to be set When multiple prop modifications, this. Sync modifier and V-bind can also be used:
     
This will pass each property in the DOC object as a separate PROP, and then add the V-ON listener for updating.

The following is the code example
Father.Vue
     
// INPUT changes the value of WRD in real time, and changes the content in Box in real time

Import box from ‘./box’ // introduces Box sub-component Export Default {name: ‘HelloWorld’, Data () {return {wrd: ”}}, components: {box}}

child.Vue
   // Word is the parent element passing 
{word}} export default {name: 'box', data () {return {str: ',}}, PROPS: {Word: ''}, watch: {str: function (newValue, oldvalue) {// Whenever the value of the Str is changed, the event update: Word is sent, and the value passes the value in the THIMIT ('Update: Word ', newvalue)}}
What is the principle of this modifier? In fact, the VUE parent component can monitor the event of sub-components, and self-assembly can trigger the incident of parent components Father.Vue

Import Box from './box'Export default {name:' HelloWorld ', Data () {RETURN {WRD: ''}}, methods: {boxincremend (e) {this.wrd = this.wrd + e}}}: {box}}
child.Vue

Export Default {Name: ‘Box’, Data () {Return {Num: 0}}, Props: {Word: ”}, Watch: {str: function (neww, old) {// Transmits INCRE events to the parent THIS. $ EMIT (‘Incre’, ++ this.num)}},}
   
When there is no SYNC, we have to achieve two-way bindings, which may need to bind an event and a value in the parent component Father.Vue

Import Box from './box'Export default {name:' HelloWorld ', DATA ( ) {RETURN {Word: ''}}, methods: {boxincremend (newword) {this.word = newword}}, components: {box}} child.Vue
{{Word}}

Export default {name: ‘Box’, Props: {Word: ”}, watch: {str: function (newword) {// Transport INCRE event THIS. $ EMIT (‘increet’, newword)}},}

But after SYNC, we can write
  Father.VUE 
Import Box from './box'Export default {name : 'HelloWorld', Data () {Return {WRD: '' '}}, methods: {boxincremend (e) {this.wrd = e}}, components: {box}}

{Word}}
EXPORT DEFAULT {name: ‘Box’, Props: {Word: ”}, Watch: {str: function (newword) {// Transport INCRE Event THIS. $ EMIT (‘Update: Word ‘, newword)}},}

The subcomponents in the parent component are written less, and the $ EMIT is directly updated in the parent component in the subcomponents. It should be noted in use, and the data name corresponding to the update and the following cannot be written.
  Double-directed data binding  
parent component change data can change the sub-assembly, but the content change of sub-components does not affect the parent component The effect of two-way binding can be achieved by 2.3.0 SYNC modifiers
Father.Vue

// INPUT changes the value of the WRD in real time, and changes the contents of the box in the box in real time

   Import box from './box' // introduced into the Box subcomponent Export default {name: 'helloworld', data () {return {wrd: ''}}}, components: {box}} 

// Word is the parent element passing over

{{Word }}}

EXPORT DEFAULT {Name: ‘Box’, DATA () {Return {str: ‘,}}, props: {Word:’ ‘}, watch: {STR : Function (NewValue, OldValue) {/ / Whenever the value of the STR is changed, the event update: Word is sent, and the value passes the value in this. $ EMIT (‘Update: Word’, NewValue)}}}

Using the incident of the parent can listen to the child elements

Father.Vue
   
Import Box from './box'Export default {name:' helloworld ', data () {return {wrd:' '} }, Methods: {BoxIncremend (E) {this.wrd = this.wrd + e}}}, Components: {box}}

 {Word}}   
Export Default {name: 'Box', DATA () {RETURN {Num: 0}}, prons: {word: ''}, watch: {str: function (neww, old) {// Transport INCRE event THIS . $ EMIT ('Incre', ++ this.num)}},}

Summary The above is the use of the Vue. Sync modifier introduced to you, I hope that everyone has anything. If you have questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment