Modifier. Native

role

Native event modifiers are used to bind a native event to a child component within the parent component, rendering the child component as a normal HTML tag.

usage

<my-com @click="hClick"></my-com>
Copy the code

Custom component, if you add @click before we click on the component, the callback will not execute

To solve this problem, you can set a. Native modifier to listen on native events

<el-dropdown-item divided @click.native="logout"> <span style="display:block;" </span> </el-dropdown-item>Copy the code

There is no $emit click event inside the custom child. For built-in DOM elements (such as div, button,p,…….) Vue automatically binds system events (click, mouseenter,…..) For ordinary custom components, you need to handle them yourself

Modifier. The sync

role

Implement bidirectional binding between parent and child component data, similar to v-Model.

The categories are: there can only be one V-Model on a component, and there can be multiple.sync modifiers

V – the principle of the model

< com1 v - model = "num" > < / com1 > is equivalent to the < com1: value = "num" @ input = "(val) = > this. Num = val" > < / com1 >Copy the code

The principle of the.sync modifier

// Normal father to child:
<com1 :a="num" :b="num2"></com1>

// Add sync from father to child:
<com1 :a.sync="num" .b.sync="num2"></com1> 

// It is equivalent to
<com1 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></com1> 

Update :a callback assigns the received value to the data item in the property binding.
Copy the code

.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.