구성 요소 유형을 기준으로 Vue의 하위 구성 요소를 필터링하는 방법은 무엇입니까?

구성 요소 유형을 기준으로 Vue의 하위 구성 요소를 필터링하는 방법은 무엇입니까?

Vue에서 어린이 구성 요소를 식별하는 데 문제가 있습니다.

여기 가격표가 있습니다.

<parent>
    <child-one>
    </child-one>

    <child-two>
    </child-two>

    <child-one>
    </child-one>
</parent>

그parent컴포넌트는 기능하고 있기 때문에, 다음과 같이 동작합니다.

render(createElement) {
    return createElement('div', this.$slots.default);
},

반복하고 싶다this.$children다음과 같은 VNode 배열을 반환합니다.

const matchingChildren = this.$children
    .filter(child => child.isChildOneType === true)

return createElement('div', {}, matchingChildren)

그걸 어떻게 하는 거죠?

필터링해야 할 항목과 장소는 무엇입니까?

내가 할 수 있다고 확신해type을 떠받치다.child-one, 그 후술합니다.this.$children.filter(child => child.$attrs.type === 'special')단, 그 정보를 바탕으로 필터링을 하고 싶습니다.child-one구성 요소들.

예를 간단하게 하려고 하는데, 이것은 탭 페이지용이기 때문에 조건부 렌더링에는 관심이 없습니다.마크업을 다른 DOM 출력으로 변환하려고 하는데 특정 유형의 아이들을 필터링해야 합니다.

나는 조사했다$attrs그리고.$options사용할 수 있는 훅이지만, Attribut을 사용할 경우 각 컴포넌트에 받침대를 추가해야 합니다.그것들은 모두 종류이기 때문에 피하고 싶다child-one. 또한 정적 속성을 추가할 수 없습니다.child-one.그$options필드는 항상 비어 있습니다.

다음과 같은 필터링 기준으로 사용하는 특정 속성을 설정함으로써 문제나 비표준적인 문제는 없습니다.

this.$children.filter(child => child.$attrs.type === 'special')

자녀 컴포넌트가 다른 비컴포넌트 마크업의 형제 컴포넌트이거나 필터링을 원하지 않는 경우에는 자녀 컴포넌트가 필요한 컴포넌트임을 나타내는 프로포넌트를 설정할 수 밖에 없습니다.

브라우저에서 자노드는 명백히 일반적이며 태그 이름, ID, 속성 등의 ID를 사용하지 않으면 서로 적절하게 분리할 수 없습니다.Vue, React, HTML, 네이티브 JS를 통해 렌더링되는 노드는 브라우저의 관점에서 모두 동일합니다.

다음과 같은 컴포넌트 이름을 사용할 수 없기 때문에child-one일반 HTML과 같이 렌더링되기 때문에 Vue 템플릿의 각 컴포넌트 래퍼에 속성/v-attribute를 쉽게 추가하고 렌더링 후 일반 노드처럼 필터링할 수 있습니다.

<parent>
    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>

    <child-two>
         <div class="wrapper" :componentType="data.type"></div>
    </child-two>

    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>
</parent>

또는 컴포넌트 자체에 Atribut을 추가할 수도 있습니다.이것은 지금까지 시도해 본 적이 없기 때문에, 도와드릴 수 없습니다.

언급URL : https://stackoverflow.com/questions/52214403/how-to-filter-children-components-in-vue-based-on-their-component-type