Vue——组件监听

最新推荐文章于 2025-04-21 21:15:00 发布

原创最新推荐文章于 2025-04-21 21:15:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue组件中的事件监听，包括自定义事件的绑定和原生事件的处理。自定义事件可以创建并绑定到组件内部，通过Vue的内建方法操作。同时，文章详细讲解了如何使用`.native`修饰符将原生事件绑定到组件的根标签，以及如何将原生事件传递到组件的子标签，并解决了如何选择性绑定单一原生事件的问题，利用Vue生命周期钩子函数筛选并绑定所需事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用处

我们在创建组件后，如果想给组件里面的标签绑定事件，就需要用到组件监听了。

自定义事件绑定到组件中

也就是给自定义标签建一个非原生事件，然后将这个事件绑定到主键里。需要用到 Vue的内建方法$emit 来操作

    <div id="father">
        <zyl-new @test="testClick"></zyl-new>
    </div>
    <script>
        Vue.component('zyl-new', {
            template: `
                <div>
                    <button @click="$emit('test')">点击</button>
                </div>
            `
        })

        let vm = new Vue({
            el:"#father",
            data:{
                count:0
            },
            methods:{
                testClick(){
                    this.count++;
                    console.log(this.count);
                }
            }
        })
    </script>

上述代码中的zyl-new自定标签有一个自定义事件test，然后我们在vue实例中编辑这个事件，最终通过$emit方法将其绑定到组件中.

点击8次按钮后：
在这里插入图片描述
也可以在$emit方法中传参

<button @click="$emit('test',4)">点击</button>

testClick(data){
                    this.count+=data;
                    console.log(this.count);
                }

可以通过传参，然后在绑定的方法中去建一个实参接收这个值

原生事件绑定到组件中

    <div id="father">
        <zyl-new @blur.native="testBlur" @focus.native="testFocus"></zyl-new>
    </div>

    <script>
        Vue.component('zyl-new', {
            template: `
                    <input/>
            `
        })

        let vm = new Vue({
            el:"#father",
            methods:{
                testBlur(){
                    console.log("失焦");
                },
                testFocus(){
                    console.log("聚焦");
                }
            }
        })
    </script>

我们可以在自定义标签上定义原生事件后，通过.native修饰符来将原生事件传给组件的根标签。
注意：通过native修饰符传输的事件只能传输给组件的根标签

传输原生事件到组件的子标签

    <div id="father">
        <zyl-new @blur="testBlur" @focus="testFocus"></zyl-new>
    </div>

    <script>
        Vue.component('zyl-new', {
            template: `
            <div>
                <input v-on="$listeners"/>
            </div>
            `
        })

        let vm = new Vue({
            el:"#father",
            methods:{
                testBlur(){
                    console.log("失焦");
                },
                testFocus(){
                    console.log("聚焦");
                }
            }
        })
    </script>

我们可以通过$listeners方法将自定义标签上的原生事件传输到子标签注意此时不能再用.native了。

那么问题来了，如果我只需要上面的失焦事件怎么办呢
这里我们可以先通过钩子函数（Vue生命周期自带的）,来看看$listeners里面装了些什么

Vue.component('zyl-new', {
            mounted() {//钩子函数
                console.log(this.$listeners);
            },
            template: `
            <div>
                <input v-on="$listeners"/>
            </div>
            `
        })

在这里插入图片描述
可以看到打印的$listeners里面有两个事件。由此我们可以通过选中其中的单个事件进行绑定，完成单一原生事件绑定。

   <div id="father">
        <zyl-new @blur="testBlur" @focus="testFocus"></zyl-new>
    </div>

    <script>
        Vue.component('zyl-new', {
            mounted() {
                console.log(this.$listeners);
            },
            template: `
            <div>
                <input @blur="$listeners.blur"/>
            </div>
            `
        })

        let vm = new Vue({
            el:"#father",
            methods:{
                testBlur(){
                    console.log("失焦");
                },
                testFocus(){
                    console.log("聚焦");
                }
            }
        })
    </script>

这样我们就可以只给组件绑定一个原生事件了

其实我个人觉得$emit更好用，因为不管是自定义事件还是原生事件。
我都能绑定到组件中去，并且可以在组件内部进行传参。

而$listenners只能原样将自定义标签上的事件绑定，不够灵活。