Vue 如何給元件繫結原生事件

梭梭醬加油鴨發表於2019-04-05
Vue元件事件

由於元件上面的事件預設為自定義事件，那麼此例中<child @click="handleClick"></child>不會被系統識別為我們理解中的點選事件必須通過$emit方法繫結它才行。

<body>
    <div id="root">
        <child @click="handleClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div @click="handleChildClick">Child</div>',
            methods:{
                handleChildClick:function(){
                    alert('child click')
                    this.$emit('click')
                }
            }
        })

        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick:function(){
                    alert('click')
                }
            }
        })
    </script>
</body>
複製程式碼

這樣元件內外都要定義方法未免有點麻煩，那麼想在元件上直接使用原生事件怎麼辦？給事件加個字尾.native就行：

<body>
    <div id="root">
        <child @click.native="handleClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div>Child</div>'
        })
        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick:function(){
                    alert('click')
                }
            }
        })
    </script>
</body>
複製程式碼

顯然，我們推薦第二種方法，程式碼少了不是一行兩行啊～

相關文章