通过 x-tag 访问器传递函数

Question

我正在尝试使用 x-tag 访问器，但我没有找到关于 them.I 的良好文档想通过访问器传递函数并编写如下内容：

<my-element logic="myFunction()"></my-element>

而且我想保存那个功能，以后再用。有什么办法吗？

Answer 1

我真的不确定你想要完成什么，但我会试一试。如果您试图使某些逻辑在所有 <my-element> 标签上可用，请使用 methods 对象，如下所示：

xtag.register('my-element', {
    methods: {
        logic: function (a) {
            return a * 2;
        }
    }
});

如果您希望能够将 logic 单独分配给 <my-element> 的每个实例，那么您可以使用标准（非属性）访问器，并隐式地这样做。

xtag.register('my-element', {
    accessors: {
        logic: {}
    }
});

HTML

<my-element id="test"></my-element>

为 <my-element>

的一个实例设置逻辑

var el = document.querySelector('my-element#test');
el.logic = function (a) {
    return a * 2;
};

如果要使用属性将 logic 的值设置为全局函数，可以这样做：

示例全局函数

function myFunction(a) {
    return a * 2;
}

组件

xtag.register('my-element', {
    accessors: {
        logic: {
            attribute: {},
            get: function () {
                return this._logic;
            },
            set: function (v) {
                this._logic = window[v] || null;
            }
        }
    }
});

用法（HTML）

<my-element logic="myFunction"></my-element>

用法（JS）

var el = document.querySelector('my-element');
el.logic(2); // 4

通过 x-tag 访问器传递函数

Pass function through x-tag accessors

html

javascript

x-tag