Shopware 관리 CMS 구성 요소 편집기의 인터페이스 보기 재설계

Question

Shopware의 WYSIWYG 편집기에서 사용할 새 CMS 요소를 생성할 때 세 가지 구성요소가 있습니다. 하나는 comComponent라는 이름이고 다른 하나는 configComponent ;코드>미리보기 구성요소.

configComponent는 요소의 구성을 선택하는 데 사용되는 반면, comComponent 구성 요소는 편집기에서 보기를 업데이트하는 데 사용됩니다. 예를 들어 구성 섹션에서 선택한 콘텐츠를 표시합니다. 내 문제는 사용자가 저장 버튼을 클릭한 후에만 편집기에서 보기를 업데이트하므로 사용자 경험이 좋지 않다는 것입니다. 실시간으로 업데이트되어야 합니다.

configComponent에서 엔터티 ID를 선택한 후 어떻게든 업데이트 이벤트를 $emit해야 한다고 생각합니다. 그런 다음 <코드>컴포넌트컴포넌트에 대한 선택된 엔터티의 ID입니다.

그래서 comComponent의 나뭇가지에는 다음과 같은 코드가 있습니다:

문서에 따르면 entity-picked 이벤트가 configComponent ; "entityPickedHandler" 메소드.

예를 들어, 다음은 comComponent의 이벤트 핸들러입니다.

메서드: {
  엔터티PickedHandler(데이터) {
    console.log('트리거 이벤트:', data);
  }
}

그런 다음 configComponent에서 이벤트를 내보냅니다.

계산됨: {
  내엔티티: {
    얻다() {
      this.element.config.entity.value를 반환합니다.
    },

    설정(값) {
      // this.$set(this.element.data, 'entityId', value);
      this.element.config.entity.value = 값;
      console.log('엔티티 선택 이벤트를 내보내려고 합니다.');
      this.$emit('entity-picked', value);
    }
  }
}

entityPickedHandler 핸들러의 console.log()가 출력되지 않기 때문에 이는 작동하지 않습니다. 그러나 이벤트가 발생했어야 합니다.

Answer 1

Getter/Setter는 범위 지정과 관련하여 약간 까다로울 수 있습니다. 일반적인 접근 방식이 올바른 것 같습니다. 데이터 속성에 엔터티를 저장하고 여기에 리스너를 설정해 보세요.

으아악

업데이트
또는 component 구성 요소 내부의 청취자로:

으아악

다음을 사용하여 configComponent에서 데이터를 업데이트할 수 있습니다.

으아악

그런 다음 configComponent的twig文件中，myentity方法用于sw-entity-single-select的v-model의 twig 파일에서 sw-entity-single-select의 v-model에 myentity 메서드가 사용됩니다.

으아악