vue中父子组件绑定事件

柔光的暖阳◎ 2022-04-16 01:23 466阅读 0赞

父子组件绑定事件：

注意：父组件是自定义事件，由子组件传递触发事件信息；子组件是系统事件比如：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>

![20181115095239106.png][]

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>

当点击![20181115095717647.png][]时，会触发父组件上的click事件，打印![20181115095801517.png][]

[20181115095239106.png]: /images/20220416/663ea6104cd64d628bc582d25e2880b4.png
[20181115095717647.png]: https://img-blog.csdnimg.cn/20181115095717647.png
[20181115095801517.png]: /images/20220416/76384c3da74148559775a7d153bad0c8.png