Bind native events and event modifiers to components native

Insert picture description here
The above code will not have any output when clicking on the Child of the page, because it is bound to a custom event. To have output, you need to do this:
Insert picture description here

<body>
    <div id="app">
        <child @click="handleClick"></child>
    </div>

    <script>
        Vue.component('child', {
    
    
            template: '<div @click="componentClick">Child</div>',
            methods: {
    
    
                componentClick() {
    
    
                    this.$emit('click', '子组件通过自定义事件传递的值')
                }
            }
        })
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    },
            methods: {
    
    
                handleClick(val) {
    
    
                    console.log(val)
                }
            }
        });
    </script>
</body>

Insert picture description here
But this is too much trouble, there can be a simpler way:事件修饰符native

Insert picture description here
Insert picture description here

Guess you like

Origin blog.csdn.net/dyw3390199/article/details/112424883
Recommended