Vuej에는 변수와 함수를 공유하는 여러 구성 요소가 있습니다.

Vuej에는 변수와 함수를 공유하는 여러 구성 요소가 있습니다.

이것은 연습에 관한 것입니다.실제로 작업 시나리오는 없지만 예를 들어 보겠습니다.Facebook 메신저를 상상해 보세요.헤더에 채팅 위젯이 있어 메시지를 빠르게 보고 응답할 수 있습니다.모두 보기를 클릭하여 메시지 페이지로 이동할 수도 있습니다.

2개의 Vue 컴포넌트를 가지고 있는 것을 알 수 있습니다.이 컴포넌트는 부모 컴포넌트와 자식 컴포넌트보다 형제 컴포넌트입니다.하나는 모든 페이지에서 사용되고 다른 하나는 메시지 페이지에서 사용됩니다.

<chat></chat> and <chat-widget></chat-widget>

위젯과 채팅창 자체는 같은 방식으로 동작하는 기능이지만 로드되는 위치에 따라 템플릿이 약간 다를 수 있습니다.

messages() {}
compose() {}
validate() {}

이것은 Larabel을 백엔드로 사용하고 있기 때문에 Vue 프런트엔드와 백엔드(데이터베이스) 간에 요구를 송신하기 위해 악시오를 사용하는 예입니다.

이상적으로는 이 컴포넌트가 기능을 복제하지 않았으면 좋겠는데, 단순히 복제해야 하나요, 아니면 부모 기능을 저장할 수 있는 방법이 있나요?

한 가지 문제는 비동기적인 아약스 요청 때문에 단순히 메시지를 바인드하도록 반환하는 함수를 호출할 수 없다는 것입니다.최소한 바인드할 수는 없을 것 같습니다.

컴포넌트 내에서 동일한 기능이 중복되지 않도록 Vue를 사용하여 이 작업을 최적화할 수 있는 지침을 찾고 있습니다.

컴포지션을 사용하여 다른 컴포넌트가 확장 가능한 "기본/추상" 컴포넌트를 작성할 수 있습니다.

https://vuejs.org/v2/api/ #syslog

var CompA = { ... }
// extend CompA without having to call `Vue.extend` on either
var CompB = {
  extends: CompA,
  ...
}

기본/추상 클래스에서 기능을 상속하거나 상위 기능의 일부를 재정의할 수 있습니다.

다른 방법은 mixin을 작성하는 것입니다.

https://vuejs.org/v2/guide/mixins.html#ad

이 기능은 컴포넌트가 기능을 공유할 필요가 있지만 거의 동일하지 않은 경우에 도움이 됩니다.를 사용하는 경우extend이러한 경우 대부분의 기본 기능을 재정의할 수 있습니다.

물론 일반적으로 사용되는 메서드를 별도의 파일로 추출하여 컴포넌트에 직접 Import하는 것을 막을 수 없습니다.

언급URL : https://stackoverflow.com/questions/46485070/vuejs-have-multiple-components-sharing-variables-and-functions