What's the difference between when to use a component's .sync modifier and when to use a custom component's vmurmodel?

look at the official definition of .sync first

clipboard.png

v-model

clipboard.png

both want to achieve the same goal, subcomponents and external data Synchronize, two-way binding

Vue.js javascript
Mar.06,2021

come to a conclusion first: both are syntactic sugars in essence, and both aim to achieve two-way binding between components and external data. V-model is an embodiment of .sync. .sync is more flexible; v-model is more single

here is an official quote: the scope of the component instance is isolated. This means that the data of the parent component cannot (and should not) be referenced directly within the template of the child component. The data of the parent component needs to be sent to the child component through prop.
both sync and v-model send external data to the component through prop, and the component sends back the data that has changed internally through event.

on the code, you can directly execute a single file 

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vue-sync">
    <h3>I'm sync</h3>
    
the input value is {{parentValue}}

    <vue-sync :value.sync="value"></vue-sync>

    <!--@update:value  @update-->
    <!--<vue-sync :value="parentValue" @update:value="val => parentValue = val"></vue-sync>-->
</div>

<div id="vue-v-model">
    <h3>I'm v-model</h3>
    
the input value is {{value}}

    <vue-model :value="value" @change="value = arguments[0]"></vue-model>
</div>
</body>
</html>
<script>
    Vue.component('vue-sync', {
        template: '<input :value="input_value" @change="input">',
        props: ['input_value'],

        methods: {
            input: function () {
                this.$emit('update:value', this.$el.value)
            }
        }
    });

    Vue.component('vue-model',{
       template:'<input :value="input_value" @input="updateValue($event.target.value)">',
        props:['input_value'],
        methods:{
           updateValue:function (val) {
               this.$emit('change',val);
           }
        }
    });



    new Vue({
        el: "-sharpvue-sync",
        data: {
            parentValue: 1
        }
    });

    new Vue({
        el:"-sharpvue-v-model",
        data:{
            value:1
        }
    })
</script>

v-model can only have one.
personal understanding, the other is the semantic difference. prop.sync indicates that this child component modifies the value of the parent component, and v-model indicates that it is a component of form type .

  • v-model
    v-model binds value, which semantically refers to the value of the bound component. For example, v-model of el-input refers to the input value,
  • .sync
    .sync is just a syntactic sugar bound in both directions, which allows the child component to modify the state of the parent component internally. For example, < el-dialog: visible.sync='dialogVisible' > < / el-dialog > just means that the visible state of the component el-dialog can be changed within the component.

both have bidirectional binding elements in common. The difference is that v-model bidirectional binding is value , and .sync can bind any attribute (prop)

bidirectionally.

to sum up, that is to say,

if a component requires two-way bound properties,

is it worth it? Use v-model , for example, the value of el-input may be a string entered by the user, and the value of el-form may be a=b&c=d , or it may be {av lange breadth, cjoughd'}

.

if there is no value, for example, a dialog el-dialog has only explicit and implicit status (visible.sync) and no value (of course, if you think it has a value, you can also use v-model ).

v-model is generally a form component, which binds the value property. The bidirectional binding of this value is not the relationship between the parent component and the child component, but the corresponding relationship between the view and the model, because the change in the value of the form component comes from the user input
, while the sync refers to the communication between the parent and child components

.

Previous: The conflict between Angular5 and echarts causes the CPU occupation of the project to remain high during browser access.

Next: Call Spark mllib linear regression to print weights and other coefficients are all NaN

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
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31e19-2bdd7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31e19-2bdd7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?