vue中使用v-on=“$listeners“ 将所有的事件监听器指向这个组件的某个特定的子元素
vue中使用v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素//这是父组件<template><div class="homeView"><base-input v-on:focus="onFocus" v-model="baseInput.fullName" :label="label"></base-input>
·
vue中使用v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素
//这是父组件
<template>
<div class="homeView">
<base-input v-on:focus="onFocus" v-model="baseInput.fullName" :label="label"></base-input>
</div>
</template>
<script>
//引入组件
import BaseInput from './BaseInput'
export default {
name: "HomeView",
//注册组件
components: {
BaseInput
},
data() {
return {
baseInput: {
firstName: 'base',
lastName: 'Input',
fullName: 'base Input'
},
label: ''
}
},
created() {
this.label = this.baseInput.firstName + this.baseInput.lastName;
},
methods: {
onFocus: function() {
console.log("verification the native whether effective.")
}
},
}
</script>
<style scoped>
.homeView {
width: 80%;
height: auto;
margin: auto;
}
</style>
//这是子组件
<template>
<div>
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
></input>
<input></input>
</label>
第二个input获得焦点时不会有任何效果,原因是v-on="inputListeners"未作用在这个这个元素上。
</div>
</template>
<script>
export default {
name: "BaseInput",
// 根元素不继承attribute,配合v-bind="$attrs"使用,指定被赋予attribute的元素上加此属性
inheritAttrs: false,
props: ['label', 'value'],
data() {
return {}
},
computed: {
inputListeners: function () {
var vm = this;
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器,
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
},
methods: {}
}
</script>
<style scoped>
</style>
有不对的地方还请指出!
更多推荐
已为社区贡献1条内容
所有评论(0)