• 技术文章 >web前端 >Vue.js

    认识一下vue中的$attrs和$listeners属性,聊聊用法

    青灯夜游青灯夜游2022-03-02 10:07:56转载391
    本篇文章带大家了解一下vue中封装组件利器:$attrs、$listeners属性,看看它们的用法,希望对大家有所帮助!

    多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。但仅仅是传递数据,不做中间处理,使用 vuex 处理,未免有些大材小用了。所以就有了 $attrs$listeners两个属性 ,通常配合 inheritAttrs 一起使用。【相关推荐:vuejs视频教程

    $attrs

    inheritAttrs 属性

    2.4.0 新增

    官网链接 https://cn.vuejs.org/v2/api/#inheritAttrs

    例子:

    父组件

    <template>
      <my-input
          required
          placeholder="请输入内容"
          type="text"
          class="theme-dark"
      />
    </template>
    
    <script>
    import MyInput from './child'
    export default {
      name: 'parent',
      components: {
        MyInput
      }
    }
    </script>

    子组件

    <template>
      <div>
        <input
            v-bind="$attrs"
            class="form-control"
        />
      </div>
    </template>
    
    <script>
    export default {
      name: 'MyInput',
      inheritAttrs: false
    }
    </script>

    子组件中没有接受父组件中传过来的值,也没有绑定,但是有v-bind="$attrs"这个属性,他会自动接受并绑定

    inheritAttrs: false

    1.png

    inheritAttrs: true

    2.png

    $listeners (官网解释)

    先上代码:这里只举例focueinput两个原生事件

    // 父组件
    <template>
      <my-input
          required
          placeholder
          class="theme-dark"
          @focue="onFocus"
          @input="onInput"
      >
      </my-input>
    </template>
    <script>
    import MyInput from './child'
    export default {
      components: {
        MyInput
      },
      methods: {
        onFocus (e) {
          console.log(e.target.value)
        },
        onInput (e) {
          console.log(e.target.value)
        }
      }
    }
    </script>
    // 子组件
    <template>
      <div>
        <input
            type="text"
            v-bind="$attrs"
            class="form-control"
            @focus="$emit('focus', $event)"
            @input="$emit('input', $event)"
        />
      </div>
    </template>
    
    <script>
    export default {
      name: 'MyInput',
      inheritAttrs: false
    }
    </script>

    这样绑定原生事件很麻烦,每一个原生事件都需要绑定,但用v-on="$listeners"就会省事很多

     <input
            type="text"
            v-bind="$attrs"
            class="form-control"
    +       v-on="$listeners"
    -       @focus="$emit('focus', $event)"
    -       @input="$emit('input', $event)"
        />

    这样一行代码就能解决绑定所有的原生事件的问题

    【相关推荐:《vuejs教程》、《web前端》】

    以上就是认识一下vue中的$attrs和$listeners属性,聊聊用法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue $attrs $listeners
    上一篇:一小时入门vue组件(建议收藏) 下一篇:深入解析下vue3中的渲染系统
    千万级数据并发解决方案

    相关文章推荐

    • 解读Vue之怎样把数据包装成reactive从而实现MDV效果• 教你两种方法设置vue动态浏览器标题(实例详解)• vue数据绑定的几种方式是什么• vue3异步组件有什么用• vue中indexof的用法是什么• vue和elementui有什么区别
    1/1

    PHP中文网