vue 新属性学习

1， $listeners

　　父级元素

　　<base-input v-on:focus.native="onFocus"></base-input>

　　子级元素

　　<label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label>

　　这时，父级的 .native 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。

　　为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器

 

 

　　有了这个 $listeners 属性，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input> 的你希望它也可以　　配　　合 v-model 工作的组件来说，为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的

<input
                type="num"
                placeholder="请输入验证码"
                maxlength="6"
                v-bind="$attrs"
                v-bind:value="value"
                v-on="inputListeners"
                />
                   

 

inputListeners: function () {
            let vm = this
            return Object.assign({},
                this.$listeners,
                {
                    focus: function () {
                        if (event.target.value.length) {
                            vm.showClose = true
                        }
                    },
                    input: function (event) {
                        vm.$emit('input', event.target.value)
                    }
                }
            )
        }

 

 

2，inheritAttrs 配合 $attr使用

　　

vue官方对vm.$attrs的介绍：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

 

在Vue2.4.0,可以在组件定义中添加inheritAttrs：false，组件将不会把未被注册的props呈现为普通的HTML属性。但是在组件里我们可以通过其$attrs可以获取到没有使用的注册属性，如果需要，我们在这也可以往下继续传递。