vue.js實戰——.native修飾符

時間 2020-05-08

標籤 vue.js vue 實戰 native 修飾欄目 JavaScript 简体版

原文原文鏈接

https://blog.csdn.net/qq_29468573/article/details/80771625vue

除了用v-on在組件上監聽自定義事件外，也能夠監聽DOM事件，這時能夠用.native修飾符表示監聽的是一個原生事件，監聽的是該組件的根元素，示例以下：app

<my-component v-on:click="handleClick"></my-component>　　//不會觸發

　　　　　　<my-component v-on:click.native="handleClick"></my-component>　　//觸發handleClick

<body>
    <div id="app">
        <my-component @click="outClick"></my-component>  　　　　　　<!-- 點擊無彈框，事件綁定失敗 -->

<my-component @click.native="outClick"></my-component>　   <!--點擊有彈框，事件綁定成功--->

</div>
    <script> Vue.component('my-component',{ template:'<button>點擊事件</button>' }) var app=new Vue({ el:'#app', methods:{ outClick(){ alert('this is outer'); } } }) </script>
</body>

總結：this

　　在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標籤，不加「」.native「」事件是沒法觸發的。spa

　　能夠理解爲該修飾符的做用就是把一個vue組件轉化爲一個普通的HTML標籤，而且該修飾符對普通HTML標籤是沒有任何做用的。.net

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。