<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;"> &lt;config-component @entity-picked="entityPickedHandler" /&gt; </pre> <p>根据我对文档的理解，这应该在从<code>configComponent</code>发出<code>entity-picked</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 %}