.native

Ask questions?

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

What does native do here?

answer

If we add @click to a custom component, the callback will not be executed when we click the component because there is no $emit cilck event inside the custom component. For built-in DOM elements such as div, button… Vue automatically binds system events, but common custom components need to handle them themselves.

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.

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

The principle of

V – model principle

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

The.sync modifier principle

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

The difference between V-Model and.sync

The same

Can realize bidirectional communication of data in parent and child components

The difference between

  • The V-Model can only be used once, whereas the.sync can have more than one
  • Different format
  • v-model: @input + value
  • :num.sync: @updata:num