VUE에서 선호하는 템플릿 및 로직 공유 접근 방식

VUE에서 선호하는 템플릿 및 로직 공유 접근 방식

나는 논리학과 템플릿을 공유하는 연관성이 없는 두 개의 문맥 구성요소가 있는데 하나는 다른 것을 확장하는 것처럼 보인다.

다음과 같은 Imagine Drop 및 Pick 구성 요소:

// pick.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Pick extends Vue {
  template: '<p>{{name}}</p>',
  created() {
    console.log('Hello Pick');
  }
  data: { 
    name: 'pick',
    count: 0
  },
  methods: {
    add: function () {
      this.count++;
    }
  }
}

// drop.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Drop extends Vue {
  template: '<p>{{name}}</p> <span v-if="isUserFriendly">Greetings!!!</span>',
  created() {
    console.log('Hello Drop');
  }
  data: { 
    name: 'drop',
    isUserFriendly: false,
    count: 0,
    drops: 0
  },
  methods: {
    add: function () {
      this.count++;
      this.drops++;
    },
    remove: function () {
      this.count--;
    },
  }
}

직관적으로, 일부 기능을 추가하고 템플릿을 변경하면서 Drop이 Pick을 확장하고 있다고 말할 수 있다.이것은 좋은 해결책인 것 같지만, 나는 Pick 템플릿을 달성하기 위해서는 다음과 같이 보여야 한다고 생각했다.

<p>{{name}}</p> 
<span v-if="isUserFriendly">Greetings!!!</span>

내가 관계없는 컨텍스트 구성요소를 말한거 기억나?이제 픽은 받아들일 수 없는 isUserFriendly에 대해 알아야 하며, 나는 그것이 올바른 해결책이라고 생각하지 않는다.게다가 상속은 유지하기가 어려울 수 있기 때문에 미래에 오버헤드를 발생시킬 것이다(확장할 요소와 공유할 논리를 더 상상하라).

여기서 가장 좋은 접근법은 무엇이라고 생각하십니까?혹시 주변에 내가 모르는 다른 방법이 있을까?

도와줘서 고마워!

구성요소 구성은 이것을 하기 위한 일반적인 방법이다.드롭 컴포넌트는 일련의 기능을 포함한다. 즉, 선택 컴포넌트는 원하는 출력 및 동작을 허용하는 방식으로 포장될 수 있어야 한다.

부모-자녀 관계의 경우, 데이터 조각은 소품 및 이벤트로 전달되고 뷰 조각은 슬롯으로 전달된다.

추가 논리는 상위 구성요소에 유지된다.

하위 구성 요소에서 (Pick):

<div>
  <p>{{name}}</p>
  <slot name="extraText"/>
</div>

그리고

add: function () {
  this.count++;
  this.$emit('add');
}

상위 구성 요소에서 (Drop):

<Pick @add="drops++">
  <template v-slot:extraText>
    <span>Greetings!!!</span>
  </template>
</Pick>

참조URL: https://stackoverflow.com/questions/69705221/which-approach-of-sharing-template-and-logic-is-preferred-in-vue