vue自定義元件如何新增使用原生事件

2022-04-21 13:00:13

自定義元件如何新增使用原生事件

自定義元件(Components)是vue的重要知識塊之一，使用中不少人會發現一個問題：為什麼我在元件裡繫結click事件不起作用？這裡先看看原因吧。

在自定義元件中直接繫結原生事件vue可是"不待見"的，它會認為你沒有定義這個事件，所以沒有任何反應。

哪些是原生事件？

例如click單擊、mouseover滑鼠移入、mouseout滑鼠移出、keyup鍵盤按下擡起、keydown鍵盤按下…等等一系列由官方提供的事件都是原生事件。那麼咋辦？

. $emit()傳遞

<body>
   <div id="app">
       <Jsxj :jsxj="message" @click="JsxjChange"></Jsxj>
   </div>
</body>

<script>
   var vm = new Vue({
       el:"#app",
       data:{
           message:"Hello World"
       },
       components:{
           Jsxj:{
               props:['jsxj'],
               template:`<p @click="pChange">{{jsxj}}</p>`,
               methods: {
                   pChange(){
                       this.$emit("click")
                   }
               },
           }
       },
       methods: {
           JsxjChange(){
               this.message="Hi, Jsxj"
           }
       },
   })
</script>

第一種方法是通過$emit()傳遞事件。如程式碼：我們在自定義元件Jsxj中設定模板，在模板中<p>原生元素上觸發原生click事件，呼叫函數pChange()，函數用$emit()向上傳遞自定義事件click，父元件Jsxj接收到這個事件，於是便可以正常觸發click。

. native屬性

<body>
   <div id="app">
       <Jsxj :jsxj="message" @click.native="JsxjChange"></Jsxj>
   </div>
</body>

<script>
   var vm = new Vue({
       el:"#app",
       data:{
           message:"Hello World"
       },
       components:{
           Jsxj:{
               props:['jsxj'],
               template:`<p>{{jsxj}}</p>`  
           }
       },
       methods: {
           JsxjChange(){
               this.message="Hi, Jsxj"
           }
       },
   })
</script>

第二種方法相對簡單。

程式碼大同小異，不過我們不再用$emit()從子向父傳遞自定義事件，太麻煩了，而是用native屬性幫忙@click.native="JsxjChange"，這樣元件就會知道這是原生事件click，呼叫相應的函數。

vue使用原生事件

在專案中用到element ui 這個ui框架，有些元件沒有封裝的事件，例如click事件，我在使用時感覺不起作用，後來檢視vue官方檔案，發現有些原生事件是不提供，還有我們自定義的元件也是不能直接使用click事件的，需要在click事件後寫上.native才能生效

即例如：

<el-card @click.native = "enter"></el-card>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue自定義元件如何新增使用原生事件

目錄

自定義元件如何新增使用原生事件

. $emit()傳遞

. native屬性

vue使用原生事件

熱門文章