Shopware管理CMSコンポーネントエディタのインターフェースビューを再設計

Question

Shopware の WYSIWYG エディタで使用する新しい CMS 要素を作成する場合、3 つのコンポーネントがあります: component という名前のコンポーネント、 configComponent という名前のコンポーネント、および < という名前のコンポーネント;code>previewComponent。

configComponent は明らかに要素の構成を選択するために使用され、component コンポーネントはエディターのビューを更新するために使用されます。たとえば、設定セクションで選択した内容を表示します。私の問題は、ユーザーが保存ボタンをクリックした後にのみエディターのビューが更新されるため、ユーザーエクスペリエンスが低下することです。リアルタイムで更新する必要があります。

configComponentからエンティティIDを選択した後、何らかの方法で$emit更新イベントを行う必要があると思います。その後、選択したエンティティの ID を component コンポーネントに渡します。

それで、component の小枝には次のコードがあります。

 <config-component @entity-picked="entityPickedHandler" />

ドキュメントの理解によると、entity-picked イベントが configComponent から発行されるときに、これは component で呼び出される必要があります。 ; 「entityPickedHandler」メソッド。

たとえば、これは component のイベント ハンドラーです。

メソッド: {
  entityPickedHandler(data) {
    console.log('トリガーイベント:', データ);
  }
}

次に、configComponent からイベントを発行します。

計算: {
  myEntity: {
    得る（） {
      this.element.config.entity.value を返します。
    }、

    セット(値) {
      // this.$set(this.element.data, 'entityId', value);
      this.element.config.entity.value = 値;
      console.log('エンティティが選択したイベントを発行してみます');
      this.$emit('エンティティが選択された', value);
    }
  }
}

entityPickedHandler ハンドラーの console.log() が出力しないため、これは明らかに機能しません。ただし、イベントは発行されるはずです。

Answer 1

Getter/Setter はスコープに関して少し難しい場合があります。通常のアプローチは正しいようです。エンティティをデータ プロパティに保存し、それにリスナーを設定してみてください。

リーリー

更新
または、component コンポーネント内のリスナーとして:

リーリー

データは、configComponent から次のコマンドを使用して更新できます。 リーリー

次に、

configComponent の twig ファイルで、myentity メソッドが sw-entity-single-select の v-model## で使用されます。 #： リーリー