Shopware 扩展组件中 this.$super 的正确使用方法

vue.js

2024-03-10 10:44:11

在扩展组件中正确调用 this.$super

问题

在 Shopware 的自定义插件中扩展 sw-url-field 组件时，调用 this.$super 会抛出 TypeError。

解决方案

为了在扩展组件中正确使用 this.$super，需要遵循以下步骤：

导入 Shopware 组件库
```
import {Component} from Shopware;
```

扩展组件

Component.extend('my-url-field', 'sw-url-field', {
    // ...
});

覆盖方法

在扩展组件中，使用 methods 对象覆盖父组件的方法。例如，要覆盖 validateCurrentValue 方法，请使用以下语法：
```
methods: {
    validateCurrentValue(value) {
        // ...
    }
}
```
使用 this.$super

在覆盖的方法中，可以使用 this.$super 调用父组件的原始方法。语法如下：
```
this.$super('validateCurrentValue', value);
```
传递参数

this.$super 可以接受与父组件方法相同的参数。例如，在 validateCurrentValue 方法中，传递 value 参数。

示例

以下示例演示了如何正确覆盖 sw-url-field 组件的 validateCurrentValue 方法：

import {Component} from Shopware;

Component.extend('my-url-field', 'sw-url-field', {
    methods: {
        validateCurrentValue(value) {
            // ...自定义逻辑...

            // 调用父组件的原始方法
            const sanitizedValue = this.$super('validateCurrentValue', value);

            // ...自定义逻辑...

            return sanitizedValue;
        }
    }
});