Dalam mencipta elemen CMS baharu untuk digunakan dalam editor WYSIWYG Shopware, kami mempunyai tiga komponen: satu bernama component dan satu lagi bernama configComponent, dan satu lagi bernama < ;code>previewComponent.
configComponent jelas digunakan untuk memilih konfigurasi elemen, manakala komponen component Sebagai contoh, paparkan kandungan yang dipilih dalam bahagian konfigurasi. Masalah saya ialah ia hanya mengemas kini paparan dalam editor selepas pengguna mengklik butang simpan, yang membawa kepada pengalaman pengguna yang buruk - ia harus dikemas kini dalam masa nyata.
Saya rasa saya perlu entah bagaimana configComponent, Kemudian lulus ID entiti yang dipilih kepada komponen
Jadi, dalam ranting
Dari pemahaman saya tentang dokumentasi, ini harus dipanggil apabila acara
entiti dipilihdipancarkan daripadaconfigComponent; kaedah "entityPickedHandler".Sebagai contoh, ini ialah pengendali acara dalam
komponen :kaedah: { entityPickedHandler(data) { console.log('Peristiwa pencetus:', data); } }Kemudian, keluarkan acara daripada
configComponent:dikira: { myEntity: { dapatkan() { kembalikan this.element.config.entity.value; }, set(nilai) { // this.$set(this.element.data, 'entityId', value); this.element.config.entity.value = nilai; console.log('Cuba untuk memancarkan acara yang dipilih entiti'); this.$emit('entity-picked', value); } } }Jelas sekali, ini tidak berfungsi kerana
console.log()dalam pengendalientityPickedHandlerWalau bagaimanapun, peristiwa itu sepatutnya dipancarkan.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Penetap/Penetap boleh menjadi agak rumit apabila melibatkan skop. Pendekatan biasa nampaknya betul. Mungkin cuba simpan entiti dalam sifat data dan tetapkan pendengar padanya.
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; }, },Dikemas kini
Atau sebagai pendengar di dalam komponen
component:watch: { 'element.data.entityId': { handler() { this.entityId = this.element.data.entityId; }, deep: true, } }Data kemudiannya boleh dikemas kini daripada
configComponentmenggunakan: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); } } },Kemudian, dalam fail ranting
configComponent的twig文件中，myentity方法用于sw-entity-single-select的v-model, kaedahmyentitydigunakan dalamv-modelsw-entity-single-select:{% block sw_cms_element_team_box_config %}