快捷導航

Vue?事件中的?.native你搞明白了嗎

更新時間：2023年02月02日 15:35:16 作者：李云蹊

.native主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標簽，并且該修飾符對普通HTML標簽是沒有任何作用的，這篇文章主要介紹了vue?事件中的?.native你搞清楚了嗎,需要的朋友可以參考下

native是什么？

.native - 監(jiān)聽組件根元素的原生事件。
主要是給自定義的組件添加原生事件。

官網(wǎng)的解釋：

你可能想在某個組件的根元素上監(jiān)聽一個原生事件?？梢允褂?v-on 的修飾符 .native 。

通俗點講：就是在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標簽，不加'. native'事件是無法觸發(fā)的。

<!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
      <div id="app">
          <button @click.native="clickFn">按鈕</button>
      </div>
  <script src='vue.js'></script>
  <script>
 
 
      new Vue({
          el:'#app',
          data:{
          },
          methods:{
              clickFn () {
                console.log('點擊按鈕了')
            }
          }
      })
  </script>
  </body>
  </html>

此時點擊頁面中的按鈕無任何反應(yīng)。

<!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:{
            clickFn (e) {
              console.log(e)  //打印出MouseEvent對象
              if (e.target.nodeName === 'IMG') {  // 可以對點擊的target標簽進行判斷
                this.dialogImageUrl = file.target.src
                this.dialogVisible = true
              }
          }
        }
    })
 
</script>
</body>
</html>

總結(jié)： .native - 主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標簽，并且該修飾符對普通HTML標簽是沒有任何作用的。