vue의 $attrs 및 $listeners 속성을 알아보고 사용법에 대해 이야기해 보세요.

이 기사에서는 vue: $attrs 및 $listeners 속성에서 구성 요소를 캡슐화하는 강력한 도구를 소개하고 해당 도구가 어떻게 사용되는지 살펴보겠습니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

다중 레벨 구성 요소 중첩이 데이터를 전달해야 할 때 일반적으로 사용되는 방법은 vuex를 이용하는 것입니다. 하지만 중간 처리 없이 데이터를 전송하고 vuex를 사용하여 처리하는 것은 과잉입니다. 따라서 $attrs 및 $listeners라는 두 가지 속성이 있으며 일반적으로 InheritAttrs와 함께 사용됩니다. [관련 권장사항: vuejs 비디오 튜토리얼vuex。但仅仅是传递数据，不做中间处理，使用 vuex 处理，未免有些大材小用了。所以就有了 $attrs 、 $listeners两个属性 ，通常配合 inheritAttrs 一起使用。【相关推荐：vuejs视频教程】

$attrs

• 从父组件传给自定义子组件的属性，如果没有 prop 接收会自动设置到子组件内部的最外层标签上，如果是 class 和 style 的话，会合并最外层标签的 class 和 style。
• 如果子组件中不想继承父组件传入的非 prop 属性，可以使用 inheritAttrs 禁用继承，然后通过 v-bind="$attrs" 把外部传入的 非 prop 属性设置给希望的标签上，但是这不会改变 class 和 style。

inheritAttrs 属性

2.4.0 新增

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

• 类型：boolean

• 默认值：true

• 详细：

  默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

  注意：这个选项不影响 class 和 style 绑定。

例子：

父组件

<template>
  <my-input
      required
      placeholder="请输入内容"
      type="text"
      class="theme-dark"
  />
</template>

<script>
import MyInput from &#39;./child&#39;
export default {
  name: &#39;parent&#39;,
  components: {
    MyInput
  }
}
</script>

子组件

<template>
  <div>
    <input
        v-bind="$attrs"
        class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

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

inheritAttrs: false

inheritAttrs: true

$listeners (官网解释)

• listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

先上代码：这里只举例focue、input两个原生事件

// 父组件
<template>
  <my-input
      required
      placeholder
      class="theme-dark"
      @focue="onFocus"
      @input="onInput"
  >
  </my-input>
</template>
<script>
import MyInput from &#39;./child&#39;
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(&#39;focus&#39;, $event)"
        @input="$emit(&#39;input&#39;, $event)"
    />
  </div>
</template>

<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>

这样绑定原生事件很麻烦，每一个原生事件都需要绑定，但用v-on="$listeners"]

$ attrs

• 수신된 prop가 없는 경우 상위 구성 요소에서 사용자 정의 하위 구성 요소로 전달된 속성은 자동으로 하위 구성 요소 내의 가장 바깥쪽 태그로 설정됩니다. code>class 및 style, 가장 바깥쪽 태그의 class 및 style이 병합됩니다.
• 하위 구성 요소가 상위 구성 요소가 전달한 prop 속성이 아닌 속성을 상속하지 않으려는 경우 inheritAttrs를 사용하여 상속을 비활성화할 수 있습니다. 그런 다음 v-bind ="$attrs"를 전달하면 외부에서 전달된 prop가 아닌 속성을 원하는 태그로 설정하지만 class는 변경되지 않습니다. > 및 스타일.

inheritAttrs 속성

2.4.0 추가됨 공식 웹사이트 링크 https ://cn.vuejs.org/v2/api/#inheritAttrs

• 유형: 부울
🎜기본값: true🎜
• 🎜세부정보: 🎜🎜기본적으로 상위 범위는 속성이 아닙니다. props로 인식된 바인딩은 "폴백"되어 일반 HTML 속성으로 하위 구성 요소의 루트 요소에 적용됩니다. 대상 요소나 다른 구성 요소를 래핑하는 구성 요소를 작성할 때 이는 항상 예상되는 동작을 따르지 않을 수 있습니다. inheritAttrs를 false로 설정하면 이러한 기본 동작이 제거됩니다. 이러한 속성은 인스턴스 속성(2.4의 새로운 기능)을 통해 유효해질 수 있으며 v-bind를 통해 루트가 아닌 요소에 명시적으로 바인딩될 수 있습니다. 🎜🎜참고: 이 옵션은 클래스 및 스타일 바인딩에 영향을 주지 않습니다. 🎜

🎜예: 🎜🎜상위 구성 요소🎜

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

🎜하위 구성 요소🎜rrreee🎜하위 구성 요소 상위 구성 요소에서 전달된 값을 허용하지도 않고 바인딩되지도 않지만 v-bind="$attrs" 속성을 ​​사용하면 자동으로 값을 수락하고 바인딩합니다 🎜🎜inheritAttrs: false🎜🎜 🎜🎜inheritAttrs: true 🎜🎜🎜

$listeners(공식 웹사이트 설명)

• listeners: 상위 범위의 콘텐츠를 포함합니다(.native 제외). code> 데코레이터) <code>v-on 이벤트 리스너. v-on="$listeners"를 통해 내부 구성 요소로 전달할 수 있습니다. 상위 수준 구성 요소를 만들 때 매우 유용합니다.

🎜코드부터 시작해 보겠습니다. 여기에는 네이티브 이벤트의 두 가지 예만 있습니다: focue 및 input🎜rrreeerrreee🎜네이티브를 바인딩하는 것은 매우 번거로운 작업입니다. 이런 이벤트는 각각의 모든 네이티브 이벤트를 바인딩해야 하지만 v-on="$listeners"를 사용하면 많은 문제를 줄일 수 있습니다🎜rrreee🎜이런 식으로 코드 한 줄로 문제를 해결할 수 있습니다. 모든 네이티브 이벤트 바인딩 문제🎜🎜【관련 추천 : "🎜vuejs tutorial🎜", "🎜web front-end🎜"]🎜

위 내용은 vue의 $attrs 및 $listeners 속성을 알아보고 사용법에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!