Vue의 $attrs 속성에 대한 자세한 소개-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue의 $attrs 속성에 대한 자세한 소개

亚连

Jun 13, 2018 am 10:54 AM

vue

이 글에서는 주로 Vue v2.4의 새로운 $attrs 및 $listeners 속성을 사용하는 방법을 소개합니다. 이 글에서는 공부나 업무가 필요한 모든 사람에게 확실한 참고 학습 가치가 있는 샘플 코드를 통해 자세히 소개합니다. , 저를 팔로우하고 함께 배워보세요.

머리말

다중 레벨 구성 요소 중첩이 데이터를 전달해야 할 때 일반적으로 사용되는 방법은 vuex를 이용하는 것입니다. 중간 처리 없이 데이터만 전송하는 경우 vuex를 사용하여 처리하는 것은 다소 과잉일 수 있습니다. Vue 버전 2.4는 v-bind="$attrs"를 사용하여 일반적으로 interitAttrs 옵션과 함께 사용되는 props 속성 바인딩으로 간주되지 않는 상위 구성 요소의 속성을 하위 구성 요소에 전달하는 또 다른 방법을 제공합니다. 이 두 가지 속성이 언급되는 이유는 이 속성의 출현으로 인해 vuex 및 이벤트 버스에 의존하지 않고도 구성 요소 간의 구성 요소 간 통신이 간결하고 비즈니스가 명확해지기 때문입니다.

먼저 다음 응용 시나리오를 분석합니다.

컴포넌트 A와 컴포넌트 B 간의 통신: (상위-하위 컴포넌트)

위 그림에 표시된 것처럼 세 가지 컴포넌트 A, B, C가 중첩되어 있습니다. Vue에 따르면, 개발 습관에 따라 부모-자식 컴포넌트 통신은 다음과 같은 방식으로 이루어질 수 있습니다.

A에서 B로의 전달은 props를 통해 자식 컴포넌트로 전달되고, B에서 A로의 전달은 $emit in을 통해 이루어집니다. B 구성 요소 및 A 구성 요소의 v-on
글로벌 Vuex 공유 상태를 설정하면 계산된 속성과 커밋 돌연변이를 통해 데이터를 얻고 업데이트하여 상위-하위 구성 요소 통신의 목적을 달성할 수 있습니다.
Vue 이벤트 버스는 Vue 인스턴스를 사용하여 이벤트를 모니터링 및 게시하고 구성 요소 간 전송을 실현합니다.

데이터가 전역적일 필요는 없지만 상위 구성 요소와 하위 구성 요소 간에만 통신하는 경우에는 첫 번째 방법으로 충분합니다.

컴포넌트 A와 컴포넌트 C 간의 통신: (여러 수준에 걸친 컴포넌트 중첩 관계)

위 그림에 표시된 것처럼 컴포넌트 A와 컴포넌트 C는 여러 수준에 걸쳐 컴포넌트 중첩 관계에 속합니다. 두 가지는 다음과 같습니다. 통신은 종종 다음 방법을 통해 달성되어야 합니다.

B 구성 요소 전송의 도움으로 props는 위에서 아래로, 아래에서 위로 순차적으로 전달되며, $emit 이벤트는 교차 레벨 컴포넌트 통신의 효과를 달성하기 위해 전달됩니다
Vuex의 전역 상태 공유의 도움으로
Vue 이벤트 버스는 Vue 인스턴스를 사용하여 이벤트를 모니터링 및 게시하고 컴포넌트 간 전송을 실현합니다.

분명히 props와 $emit을 통한 첫 번째 방법은 구성 요소 간의 비즈니스 논리를 비대하게 만들고 구성 요소 B는 전송 스테이션 역할만 합니다. 두 번째 Vuex 방식을 사용한다면 경우에 따라서는 약간 과한 것 같습니다(그냥 컴포넌트 간 데이터 전송을 구현하기 위한 것일 뿐, 데이터 공유 개념이 아닙니다). 세 번째 상황의 사용은 실제 프로젝트 운영에서 발견됩니다. 좋은 이벤트 모니터링 및 릴리스 관리가 이루어지지 않으면 종종 데이터 흐름에 혼란이 발생하여 프로젝트 유지 관리에 도움이 되지 않습니다.

$attrs와 $listeners의 등장으로 첫 번째 상황의 문제가 해결되었습니다. 컴포넌트 B가 props와 이벤트를 전달할 때 중복된 코드를 작성할 필요가 없습니다. 단지 $attrs와 $listeners를 위아래로 옮기기만 하면 됩니다. 에.

샘플 코드

는 다음과 같습니다.

A 구성 요소(App.vue)

<template>
 <p id="app">
 <child1
 :p-child1="child1"
 :p-child2="child2"
 v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发
 v-on:test2="onTest2"> 
 </child1>
 </p>
</template>
<script>
 import Child1 from &#39;./Child1.vue&#39;;
 export default {
 data () {
 return {};
 },
 components: { Child1 },
 methods: {
 onTest1 () {
 console.log(&#39;test1 running...&#39;);
 },
 onTest2 () {
 console.log(&#39;test2 running&#39;);
 }
 }
 };
</script>

B 구성 요소(Child1.vue)

<template>
 <p class="child-1">
 <p>in child1:</p>
 <p>props: {{pChild1}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
 <child2 v-bind="$attrs" v-on="$listeners"></child2>
 </p>
</template>
<script>
 import Child2 from &#39;./Child2.vue&#39;;
 export default {
 props: [&#39;pChild1&#39;],
 data () {
 return {};
 },
 inheritAttrs: false,
 components: { Child2 },
 mounted () {
 this.$emit(&#39;test1&#39;);
 }
 };
</script>

결과:

in child1:

props: v_child1

$attrs: { "p-child2": "v_child2"}

C 구성 요소(Child2.vue)

<template>
 <p class="child-2">
 <p>in child2:</p>
 <p>props: {{pChild2}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 </p>
</template>
<script>
 export default {
 props: [&#39;pChild2&#39;],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
 this.$emit(&#39;test2&#39;);
 }
 };
</script>

Result:

in child2:

props: v_child2

$attrs: {}

지식 포인트 요약

$ attrs

에는 상위 범위에서 소품으로 간주되지 않는(그리고 그럴 것으로 예상되지 않는) 속성 바인딩(클래스 및 스타일 제외)이 포함되어 있습니다. 구성 요소가 props를 선언하지 않으면 모든 상위 범위 바인딩(클래스 및 스타일 제외)이 여기에 포함되며 내부 구성 요소는 v-bind="$attrs"를 통해 전달될 수 있습니다. - 상위 수준 구성 요소를 생성할 때 매우 유용합니다.

$listeners

에는 상위 범위의 v-on 이벤트 리스너가 포함되어 있습니다(.native 수정자 없음). 이는 v-on="$listeners"를 통해 내부 구성 요소로 전달될 수 있습니다. 더 높은 수준의 구성 요소를 생성할 때 매우 유용합니다.

inheritAttrs

props로 인식되지 않는 상위 범위의 기본 속성 바인딩은 "폴백"되어 하위 구성 요소의 루트 요소에 일반 HTML 속성으로 적용됩니다. 대상 요소나 다른 구성 요소를 래핑하는 구성 요소를 작성할 때 이는 항상 예상되는 동작을 따르지 않을 수 있습니다. 상속Attrs를 false로 설정하면 이러한 기본 동작이 제거됩니다. 이러한 기능은 인스턴스 속성 $attrs(2.4의 새로운 기능)를 통해 활성화할 수 있으며 v-bind를 통해 루트가 아닌 요소에 명시적으로 바인딩할 수 있습니다.

위 기능을 사용하면 Vuex 및 이벤트 버스를 사용하지 않고도 구성 요소 간 소품 및 이벤트 전달의 복잡성을 완전히 줄일 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.