V – the principle of the model

  • The essence of the V-Model is that:valueand@inputEvent syntax sugar
<! - v - the model of writing - > < my - component type = "text" v - model = "num" > <! <my-component type="text" :value="num" @input="(value) => num = value" > < component type="text" :value="num" @input="(value) => num = value" >Copy the code

The parent component passes values and custom events to its children, which emit input events via $emit

  • Note: This input event is a custom event in the child component
/ / in the subcomponents < template lang = "" > < div > < div > {{num}} < / div > < button @ click =" $emit (' input 'num + 1) "> < / button > < / div > </template> <script> export default { props:{ num:{ type: Number, required: true } } }Copy the code

The principle of sync

<my-component :value.sync="num" />Copy the code
/ / child components in the < template lang = "" > < div > < div > {{num}} < / div > < button @ click =" $emit (' update: value, num + 1) "> < / button > < / div > </template> <script> export default { props:{ num:{ type: Number, required: true } } }Copy the code

Both are essentially the same, there is no difference: “listen for a trigger event” =”(val) => value = val”.

The difference between the V-model and the.sync modifier

.sync is different from v-Model

  • Similarities: both are syntactic sugar, and both can realize two-way communication of data in parent and child components.

  • The mark:

    • The format is different.v-model="num", :num.sync="num"
    • V-model: @input + value
    • :num.sync: @update:num
    • The V-Model can only be used once; .sync can have more than one.

By default, the V-model corresponds to an input event of a component such as input or Textarea, and replacing this input event in a child component is essentially the same as the.sync modifier. Relatively single, can not have more than one.

$emit Model: {prop: "value", event: "update"} {$emit model: {prop: "value", event: "update"}Copy the code

A component can have multiple properties with the.sync modifier, which can “bidirectionally bind multiple” prop “at the same time, unlike the V-Model, which has only one for each component.

Because of the V-model, only one input event can be fired in a child component with a unique event name, whereas the.sync modifier, which fires with the updata: property name, has multiple event names and can be used multiple times

Summary of action scenarios:

  • Props /$emit is the most common way for parent and child components to communicate, with V-model and.sync just syntactic sugar
  • The child component simply modifies the value of a parent component that the form class component usesv-modelSyntactic sugar
  • A child component simply modifies the value of a parent component that is not used by a form class componentsyncSyntactic sugar
  • Complex logic and honestyprops/$emit

In fact, syntactic sugar is more convenient when the parent component is used, and the child component should be used as it should be.