父子组件绑定事件:

注意:父组件是自定义事件,由子组件传递触发事件信息;子组件是系统事件比如:click等

    <div id="app">
       <counter @handle="fatherEvent"></counter>  
    </div>
    <script>
        var counter = {
            template: `<div @click="sonEvent">hello</div>`,
            methods: {
                sonEvent(){
                    console.log("sonEvent")
                    this.$emit('handle')
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter 
            },
            methods: {
                fatherEvent(){
                    console.log("fatherEvent")
                }
            }
        })
    </script>

2. 监听父组件的系统事件(.native修饰符

    <div id="app">
       <counter @click.native="fatherEvent"></counter>  
    </div>
    <script>
        var counter = {
            template: `<div>hello</div>`,
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter 
            },
            methods: {
                fatherEvent(){
                    console.log("fatherEvent")
                }
            }
        })
    </script>

当点击时,会触发父组件上的click事件,打印

Logo

前往低代码交流专区

更多推荐