vue components add events @ click.native

What native that?

.native - native event listener components of the root element.
The main components of the custom is to add native event.

Official website explained:

You might want to listen a native event on the root element of a component. You can use v-on modifiers .native.

Popular speak: '. Native' is a sub-component binding in the event of a native parent components, sub-assemblies will become a regular HTML tags, without the event is not triggered.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <button @click.native="clickFn">按钮</button>
10     </div>
11 <script src='vue.js'></script>
12 <script>
13 
14 
15     new Vue({
16         el:'#app',
17         data:{
18         },
19         methods:{
20             clickFn () {
21               console.log('点击按钮了')
22           }
23         }
24     })
25 
26 </script>
27 </body>
28 </html>

At this point click on the button on the page, nothing happens.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <card @click.native="clickFn">按钮</card>
    </div>
<script src='vue.js'></script>
<script>

    Vue.component('card',{
        template:'<p>这是card组件<button>按钮</button></p>'
    })

    new Vue({
        el:'#app',
        data:{
            state:false
        },
        methods:{ 
              the console.log (E) // Print out MouseEvent object
            ClickFn (E) {
              if (e.target.nodeName === 'IMG') {// clicks can be determined in the target tag 
                this.dialogImageUrl = file.target.src 
                this.dialogVisible = to true 
              } 
          } 
        } 
    }) 

</ Script> 
</ body> 
</ HTML>

Summary: .native - mainly custom components to add native event, it is understood that a modifier role is to vue components into a common HTML tags, and the modifier ordinary HTML tags do not have any effect .

1, to vue component binding event, you must add native, otherwise they will think listening is an event from Item custom components

2, the subassembly is equivalent to: interior subassembly processing the click event and then sends out the click event:$emit("click".fn)

 
           <Item @click.native =  
           "shijian()" 
           ></Item>

1, to vue component binding event, you must add native, otherwise they will think listening is an event from Item custom components

2, the subassembly is equivalent to: interior subassembly processing the click event and then sends out the click event:$emit("click".fn)

 
         <Item @click.native =  
         "shijian()" 
         ></Item>

vue event .native vue components add events @ click.native

vue components add events @ click.native

Guess you like