在创建一个新的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中的事件处理方法：
1
1095methods: {
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()从未输出。然而，事件应该已经发出了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
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 %}