programing

Vue.js의 옵션 부모 요소

firstcheck 2022. 8. 15. 11:02
반응형

Vue.js의 옵션 부모 요소

조건에 따라 부모 요소를 옵션으로 정의하지만 항상 Vue.js에 해당 자식 요소를 표시하는 방법이 있습니까?

예를 들어 다음과 같습니다.

<a :href="link">Some text</a>

제가 달성하고 싶은 것은 다음과 같은 DOM 입니다.link

<a href="somelink">Some text</a> <!-- when link is truthy -->
Some text                        <!-- when link is falsy -->

잠재적인 솔루션

  • 하위 항목 복제:

    <a :href="link" v-if="link">Some text</a>
    <template v-if="!link">Some text</template>
    

    그러나 이는 특히 단순한 텍스트 이상의 콘텐츠가 있을 수 있으므로 좋은 해결책이 아닙니다.

  • 어떤 속성에 따라 논리를 실행하는 나만의 컴포넌트를 작성합니다.그러나 이는 과잉으로 보이며 다양한 종류의 요소 유형이나 속성에 대해 충분히 유연해야 합니다.

어느 쪽도 마음에 들지 않기 때문에, 더 간단한 해결책은 없을까 생각하고 있습니다.좋은 생각 있어요?

좀 더 파헤친 후에, 저는 작동하는 방법을 발견했고, 실제로 매우 간단했습니다.컴포넌트를 HTML 요소에 직접 바인드할 수 없는 경우에 실제로 사용하는 특수한 속성을 사용합니다.

<a :href="link" :is="link ? 'a' : 'span'">Some text</a>

그 결과, 다음의 몇개의 결과가 됩니다.

<a href="somelink">Some text</a> <!-- when link is truthy -->
<span>Some text</span>           <!-- when link is falsy -->

Vue v3.x의 경우 다음 기능이 작동합니다.

  <component
    :is="condition ? 'custom-component' : 'v-fragment'"
    custom-component-prop
    ...
  >
    ...
  </component>
// VFragment.vue
<template>
  <slot></slot>
</template>

<script>
  export default {
    inheritAttrs: false,
  }
</script>

Vue v2.x의 경우 회피책은 다음과 같습니다.

  <component
    :is="condition ? 'custom-component' : 'v-div'"
    custom-component-prop
    ...
  >
    ...
  </component>
// VDiv.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    inheritAttrs: false,
  }
</script>

단점은 다음과 같은 추가 요소가 있다는 것입니다.divVue v2.x는 fragment를 지원하지 않기 때문에 렌더링됩니다.

사용자 지정 구성 요소와 명명된 슬롯의 조합을 사용하여 하위 구성 요소의 복제를 줄일 수 있습니다. 예를 들어 다음과 같습니다.

<custom-component>
    <a :href="link" slot="slot-name-here" v-if="link">
        <custom-content-component></custom-content-component>
    </a>
    <div slot="slot-name-here" v-else>
        <custom-content-component></custom-content-component>
    </div>
</custom-component>

또는 변경하려는 콘텐츠가 너무 복잡하지 않다면 다음을 사용해 볼 수 있습니다.

이전 답변이 삭제된 이유를 모르겠습니다.여러 Q에 걸쳐 C&P 답변만 할 수는 없는 것으로 나타났습니다.다른 Q는 이 제품의 dups로 표시했습니다(여기서 시도하고 있습니다).모델레이터에게...)


저도 여러 번 이 문제에 부딪혀 로컬에서 사용하고 있는 솔루션을 사용하여 모듈을 작성하기로 했습니다.이 솔루션은 NPM에서 확인할 수 있습니다.

vue-glin-성분

이 모듈에서는 다른 컴포넌트 또는 엘리먼트를 사용하여 컴포넌트 또는 엘리먼트를 조건부로 랩할 수 있는 기능적인 Vue 컴포넌트를 제공합니다.

앞의 답변은 매우 기본적인 상황에 대해 준작업이라고 대답합니다.이 모듈은 거의 모든 상황에서 작동하는 보다 강력한 솔루션을 제공합니다. 특히 단순한 조건부 래퍼가 필요하다는 이유만으로 많은 코드가 중복될 위험이 있는 복잡한 상황에서는 더욱 그렇습니다.

언급URL : https://stackoverflow.com/questions/42886148/optional-parent-element-in-vue-js

반응형