<p>在創建一個新的CMS元素，用於Shopware的所見即所得編輯器中，我們有三個組件：一個名為<code>component</code>，另一個名為<code> configComponent</code>，還有一個名稱為<code>previewComponent</code>。 </p> <p><code>configComponent</code>顯然用於選擇元素的配置，而<code>component</code>元件用於更新編輯器中的視圖。例如，顯示在配置部分中選擇的內容。我的問題是，它只會在用戶點擊儲存按鈕後才會更新編輯器中的視圖，這會導致糟糕的用戶體驗 - 它應該即時更新。 </p> <p><strong>我認為我需要在從<code>configComponent</code>選擇實體ID後以某種方式<code>$emit</code>一個更新事件</strong>，然後將所選實體的ID傳遞給<code>component</code>元件。 </p> <p>所以，在<code>component</code>的twig中，我有以下程式碼：</p> <pre class="brush:js;toolbar:false;"> <config-component @entity-picked="entityPickedHandler" /> </pre> <p>根據我對文件的理解，這應該在從<code>configComponent</code>發出<code>entity-picked</code>事件時調用<code>component</code>中的>事件時調用<code>component</code>中的>事件時調用<code>component</code>中的>事件中的> "entityPickedHandler"方法。 </p> <p>例如，這是<code>component</code>中的事件處理方法：</p> <pre class="brush:js;toolbar:false;">methods: { entityPickedHandler(data) { console.log('觸發事件：', data); } } </pre> <p>然後，從<code>configComponent</code>中發出事件：</p> <pre class="brush:js;toolbar:false;">computed: { myEntity: { get() { return this.element.config.entity.value; }, set(value) { // this.$set(this.element.data, 'entityId', value); this.element.config.entity.value = value; console.log('嘗試發出entity-picked事件'); this.$emit('entity-picked', value); } } } </pre> <p>顯然，這不起作用，因為<code>entityPickedHandler</code>處理程序中的<code>console.log()</code>從未輸出。然而，事件應該已經發出了。 </p>

data() {
    return {
        entity: this.element.config.entity.value,
    };
},

watch: {
    entity(value) {
        this.$emit('entity-picked', value);
    },
},

methods: {
    entityChanged(value) {
        this.element.config.entity.value = value;
        this.entity = value;
    },
},

watch: {
    'element.data.entityId': {
        handler() {
            this.entityId = this.element.data.entityId;
        },
        deep: true,
    }
}

computed: {
    myentity: {
        get() {
            return this.element.config.myEntity.value;
        },

        set(value) {
            this.element.config.myentity.value = value;
            this.$set(this.element.data, 'entityId', value);
            this.$emit('element-update', this.element);
        }
    }
},

{% block sw_cms_element_team_box_config %}
    <sw-entity-single-select label="testing my entity" entity="myexample_entity" v-model="myentity" />
{% endblock %}