重新设计Shopware管理CMS组件编辑器的界面视图

Question

在创建一个新的CMS元素，用于Shopware的所见即所得编辑器中，我们有三个组件：一个名为component，另一个名为configComponent，还有一个名为previewComponent。

configComponent显然用于选择元素的配置，而component组件用于更新编辑器中的视图。例如，显示在配置部分中选择的内容。我的问题是，它只会在用户点击保存按钮后才会更新编辑器中的视图，这会导致糟糕的用户体验 - 它应该实时更新。

我认为我需要在从configComponent选择实体ID后以某种方式$emit一个更新事件，然后将所选实体的ID传递给component组件。

所以，在component的twig中，我有以下代码：

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

根据我对文档的理解，这应该在从configComponent发出entity-picked事件时调用component中的"entityPickedHandler"方法。

例如，这是component中的事件处理方法：

methods: {
  entityPickedHandler(data) {
    console.log('触发事件：', data);
  }
}

然后，从configComponent中发出事件：

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);
    }
  }
}

显然，这不起作用，因为entityPickedHandler处理程序中的console.log()从未输出。然而，事件应该已经发出了。

Answer 1

Getter/Setter在作用域方面可能有些棘手。通常的做法看起来是正确的。也许可以尝试将实体存储在一个数据属性中，并在其上设置一个监听器。

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;
    },
},

更新
或者在component组件内部作为一个监听器：

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

然后可以使用以下方式从configComponent更新数据：

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);
        }
    }
},

然后，在configComponent的twig文件中，myentity方法用于sw-entity-single-select的v-model：

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