问答

vue $listeners

作者:admin 2021-05-06 我要评论

vue官方对$listeners的解释是 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件 也就是说使用了 .nati...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

vue官方对$listeners的解释是

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件

也就是说使用了.native修饰器的v-on事件不会传递给子组件

我按照官方代码来操作,无法触发focus事件??????

https://cn.vuejs.org/v2/guide...

但是他的例子里面是使用了.native修饰器的focus事件

<template>
  <div>
    <Input
      label="username"
      placeholder="Enter your username"
      v-model="form.username"
      v-on:focus.native="onFocus" />
  </div>
</template>

<script>
import Input from '@/components/Input'
export default {
  components: { Input },
  methods: {
    onFocus (e) {
      console.log(e)
    }
  }
}
</script>
<template>
  <label>
    {{ label }}
    <input type="text" v-bind="$attrs" v-on="inputListeners">
  </label>
</template>

<script>
export default {
  inheritAttrs: false,

  props: {
    label: String
  },

  computed: {
    inputListeners: function () {
      const vm = this
      return Object.assign(
        {},
        this.$listeners,
        {
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },

  created () {
    console.log(this.$listeners)
    /**
     * {
     *  input: ?
     * }
     */
  }
}
</script>
###

对于楼主的问题,我觉得很有意思,特意百度学习了一下。
有一篇类似的文章特意讲了《使用.native和$listeners将控件的原生事件绑定到组件》
https://www.cnblogs.com/vicky...

使用.native有一个缺陷就是子组件根元素实际上是一个 `<label>` 元素时,原生事件不能被绑定到input事件上

所以楼主的问题的解决办法是将

v-on:focus.native="onFocus"

中的native去掉。

###

你的这个input是vue组件,最外层是lable标签,普通元素要设置tabIndex才能获取焦点,触发焦focus事件。

###

你把你代码里的.native去了呀。。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue $listeners

    vue $listeners

  • Node.js 如何根据上传的模板导出表格?

    Node.js 如何根据上传的模板导出表格?

  • 关于jinjia2模板注入 {{1+1}}报错而{{7

    关于jinjia2模板注入 {{1+1}}报错而{{7

  • 获取openid,一定要先关注公众号么?

    获取openid,一定要先关注公众号么?

腾讯云代理商
海外云服务器