How to use sync modifier in vue

clipboard.png
I can"t read the code in the red box: is 1.update:foo the name of the event that monitors the event? two What is the meaning of val= > bar=val executed after the event update:foo is triggered? Is the parameter newValue passed after the 3.$emit triggers the update:foo event passed to val or something else? 4. < comp: foo.sync= "bar" > means that after adding the modification of sync, you can achieve the same function of the following code? (syntax sugar) beginners, the question may be relatively low-end, can you answer in more detail if it is convenient? See laugh

Vue.js javascript
Mar.01,2021
  1. is the event name
  2. change the current bar attribute value to the passed value
  3. to
  4. is equivalent to the above operation

normally, vue2 does not allow child components to directly change the values passed by the parent component.
for data passing on vue, please see
so we need to define a custom event within the child component to inform the parent component that the value needs to be changed. 

// 
<template>
    //    val props  change
    <child :foo="val1" @update:foo="changeVal">
</template>
methods:{
    changeVal(val) {
        this.val1 = val
    }
}
//
change
this.$emit('update:foo', 'newVal')

then using the sync modifier simplifies the process. The
parent component can write this directly, and the child component still needs to trigger

. 
<template>
    //    val propssync  change
    <child :foo.sync="val1">
    // method
</template>

that's what syntax candy means. It makes you write less code.

< hr >

val= > bar=val this is the arrow function 

function (val) {
    this.bar = val
    // vuethis
    //  bar = val
}

Previous: -webkit-overflow-scrolling: touch;

Next: H5 rem layout, I would like to ask you, how is this 0.0375 calculated when setting up font-size in the following js code?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu