vue中的$listeners属性作用

深碍√TFBOYSˉ_ 2022-12-13 04:39 175阅读 0赞

一、当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。

注意：使用.native修饰符的事件，不会体现在$listeners属性上。

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>vue测试</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
      <style>
    
      </style>
     </head>
     <body>
         <div id="app">
            <base-input
                v-model="username" 
                label="基础输入组件"
                @click.native="handleBaseInputClick"
                v-on:focus="handleBaseInputFocus"
                placeholder="请输入您的名字"
                class="username-input"/>
        </div>
        <script>
            // 注册组件
            // 因为base-input的外层是一个label元素，所以默认情况下使用v-on:focus是无效的，所以需要配合$listeners使用，该属性可以把事件的监听指向组件中某个特定的元素
            // 注意：如果父级的事件添加了.native修饰符，在$listeners中不会体现出来的
            Vue.component('base-input',{
                inheritAttrs: false,
                props: ['label','value'],
                template: `
                    <label id="base-label">
                        {
       {label}}
                        <input v-bind:value="value" v-bind="$attrs" v-on="inputListeners"/>
                    </label>
                `,
                data: function() {
                    return {
                        
                    }
                },
                computed: {
                    inputListeners () {
                        var vm = this
                        return Object.assign({},
                            this.$listeners,
                            {
                                input: function () {
                                    vm.$emit('input', event.target.value)
                                },
                                focus: function (event) {
                                    vm.$emit('focus', '哈哈哈，onfocus了')
                                }
                            }
                        )
                    }
                },
                mounted: function(){
                    console.log(`$attrs:`)
                    console.log(this.$attrs)
                    console.log(`$listeners:`)
                    console.log(this.$listeners) // 父级添加的所有属性都在这里
                },
                methods: {
                    
                }
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    username: ''
                },
                created: function(){
                
                },
                beforeUpdate: function(){
                
                },
                computed: {
                    
                },
                beforeUpdate: function () {
                    console.log(this.username)
                },
                methods: {
                    handleBaseInputFocus: function(ev){
                        console.log(ev)
                    },
                    handleBaseInputClick: function(ev){
                        console.log(ev.type)
                    }
                }
            })
        </script>
     </body>
    </html>