이 글에서는 주로 Vue v2.4의 새로운 $attrs 및 $listeners 속성을 사용하는 방법을 소개합니다. 이 글에서는 공부나 업무가 필요한 모든 사람에게 확실한 참고 학습 가치가 있는 샘플 코드를 통해 자세히 소개합니다. , 저를 팔로우하고 함께 배워보세요.
다중 레벨 구성 요소 중첩이 데이터를 전달해야 할 때 일반적으로 사용되는 방법은 vuex를 이용하는 것입니다. 중간 처리 없이 데이터만 전송하는 경우 vuex를 사용하여 처리하는 것은 다소 과잉일 수 있습니다. Vue 버전 2.4는 v-bind="$attrs"를 사용하여 일반적으로 interitAttrs 옵션과 함께 사용되는 props 속성 바인딩으로 간주되지 않는 상위 구성 요소의 속성을 하위 구성 요소에 전달하는 또 다른 방법을 제공합니다. 이 두 가지 속성이 언급되는 이유는 이 속성의 출현으로 인해 vuex 및 이벤트 버스에 의존하지 않고도 구성 요소 간의 구성 요소 간 통신이 간결하고 비즈니스가 명확해지기 때문입니다.
먼저 다음 응용 시나리오를 분석합니다.
위 그림에 표시된 것처럼 세 가지 컴포넌트 A, B, C가 중첩되어 있습니다. Vue에 따르면, 개발 습관에 따라 부모-자식 컴포넌트 통신은 다음과 같은 방식으로 이루어질 수 있습니다.
A에서 B로의 전달은 props를 통해 자식 컴포넌트로 전달되고, B에서 A로의 전달은 $emit in을 통해 이루어집니다. B 구성 요소 및 A 구성 요소의 v-on
글로벌 Vuex 공유 상태를 설정하면 계산된 속성과 커밋 돌연변이를 통해 데이터를 얻고 업데이트하여 상위-하위 구성 요소 통신의 목적을 달성할 수 있습니다.
Vue 이벤트 버스는 Vue 인스턴스를 사용하여 이벤트를 모니터링 및 게시하고 구성 요소 간 전송을 실현합니다.
데이터가 전역적일 필요는 없지만 상위 구성 요소와 하위 구성 요소 간에만 통신하는 경우에는 첫 번째 방법으로 충분합니다.
위 그림에 표시된 것처럼 컴포넌트 A와 컴포넌트 C는 여러 수준에 걸쳐 컴포넌트 중첩 관계에 속합니다. 두 가지는 다음과 같습니다. 통신은 종종 다음 방법을 통해 달성되어야 합니다.
B 구성 요소 전송의 도움으로 props는 위에서 아래로, 아래에서 위로 순차적으로 전달되며, $emit 이벤트는 교차 레벨 컴포넌트 통신의 효과를 달성하기 위해 전달됩니다
Vuex의 전역 상태 공유의 도움으로
Vue 이벤트 버스는 Vue 인스턴스를 사용하여 이벤트를 모니터링 및 게시하고 컴포넌트 간 전송을 실현합니다.
분명히 props와 $emit을 통한 첫 번째 방법은 구성 요소 간의 비즈니스 논리를 비대하게 만들고 구성 요소 B는 전송 스테이션 역할만 합니다. 두 번째 Vuex 방식을 사용한다면 경우에 따라서는 약간 과한 것 같습니다(그냥 컴포넌트 간 데이터 전송을 구현하기 위한 것일 뿐, 데이터 공유 개념이 아닙니다). 세 번째 상황의 사용은 실제 프로젝트 운영에서 발견됩니다. 좋은 이벤트 모니터링 및 릴리스 관리가 이루어지지 않으면 종종 데이터 흐름에 혼란이 발생하여 프로젝트 유지 관리에 도움이 되지 않습니다.
$attrs와 $listeners의 등장으로 첫 번째 상황의 문제가 해결되었습니다. 컴포넌트 B가 props와 이벤트를 전달할 때 중복된 코드를 작성할 필요가 없습니다. 단지 $attrs와 $listeners를 위아래로 옮기기만 하면 됩니다. 에.
는 다음과 같습니다.
<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 './Child1.vue';
export default {
data () {
return {};
},
components: { Child1 },
methods: {
onTest1 () {
console.log('test1 running...');
},
onTest2 () {
console.log('test2 running');
}
}
};
</script><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 './Child2.vue';
export default {
props: ['pChild1'],
data () {
return {};
},
inheritAttrs: false,
components: { Child2 },
mounted () {
this.$emit('test1');
}
};
</script>결과:
in child1:
props: v_child1
$attrs: { "p-child2": "v_child2"}
<template>
<p class="child-2">
<p>in child2:</p>
<p>props: {{pChild2}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
</p>
</template>
<script>
export default {
props: ['pChild2'],
data () {
return {};
},
inheritAttrs: false,
mounted () {
this.$emit('test2');
}
};
</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 및 이벤트 버스를 사용하지 않고도 구성 요소 간 소품 및 이벤트 전달의 복잡성을 완전히 줄일 수 있습니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
jquery를 사용하여 링크를 클릭하여 배경 스타일을 수정하는 방법
Ajax 동기화 작업에 대해 브라우저가 일시 중지된 것처럼 보입니다(상세 튜토리얼)
텍스트에 입력된 단어 수를 모니터링하는 방법 box in js(자세한 튜토리얼)
react-router4는 webpack require.ensure와 협력하여 비동기 로딩을 달성합니다(자세한 튜토리얼)
위 내용은 Vue의 $attrs 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
