在自定义组件上监听原生的focus事件

最新推荐文章于 2024-09-10 13:24:07 发布

原创

最新推荐文章于 2024-09-10 13:24:07 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了如何在Vue自定义组件上监听原生的focus事件。通过设置`inheritAttrs: false`和使用`@click.native`来确保组件能够正确响应并处理原生事件。同时，还提供了示例代码展示如何在组件模板中实现事件监听。

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

var demo23 = new Vue({
    el: "#demo23",
    data: {
        labels: [
            { id: 1, name: '姓名：', inputvalue: '' },
            { id: 2, name: '年龄：', inputvalue: '' },
            { id: 3, name: '性别：', inputvalue: '' },
            { id: 4, name: '住址：', inputvalue: '' },
            { id: 5, name: '职业：', inputvalue: '' }
        ],
        inputvalue: ''
    },
    methods: {
        onFocus: function() {
            alert('fuck')
        },
        alertaaa: function() {
            alert('aaa')
        }
    },
    components: {
        'label-input': {
            inheritAttrs: false,
            props: ['value', 'label'],
            computed: {
                inputListeners: function() {
                    var vm = this
                        // Object.assign将所有对象合并为一个新对象
                    var obj = Object.assign({},
                        //从父级添加所有的监听器
                        this.$listeners,
                        //然后可以添加一些自