0

我想出于性能/方便的目的尝试一些东西，我知道收益将是微乎其微的，但了解它是如何/如果/为什么起作用的也将有助于学习。

我有一些自定义数据类型（定义为类），用于识别整个应用程序中的某些属性。我想在类型上使用静态函数来定义显示函数。（精简）示例：

class Email extends String{
    static display = (value) => {
        return `<a href='mailto${value}'>${value}</a>`;
    }
}

像你一样调用它：

Email.display("test@test.com");

只要它在v-html属性中，它就可以在模板中使用。这是完全可以接受的。

指定我正在使用 Vue-CLI 和单文件组件可能很重要，因此所有这些甜蜜的超脚本都是在编译时创建的。

但这让我想到，有没有办法可以在渲染时将新创建的超脚本传递给模板？如果可能的话，最好以一种{{mustache}}可行的方式。

我试过这样做，h但只显示 ol' [object Object]。

class Email extends String{
    static display = (value) => {
        return h('a', {innerHtml: value});
    }
}

更新：也试过

我想也许绕过 Vue 渲染函数可以完成工作，但它们似乎也不喜欢文档片段。

static display = (value) => {
    var fragment = document.createDocumentFragment();
    var a = document.createElement('a');
    a.textContent = value;
    fragment.appendChild(a);
    return fragment;
}

问题 有没有办法在运行时创建超脚本并在 vue 模板中使用它？如果它在{{mustache}}和中工作，则加分v-html。

4

1 回答 1

0

一般来说，使用 JSX 或h(hyperscript) 的组件模板和渲染函数是互斥的。

确实可以这样做，在这种情况下display实际上是功能组件，它需要作为任何其他动态组件输出：

setup() {
    const display = (props) => {
      return h(...);
    };

    return { display };
}

和

<component :is="display" :value="..."/>

的返回display是 vnode 对象的层次结构，它们不能在v-html没有预先呈现为 HTML 的情况下按原样使用。

于 2022-02-12T19:38:02.333 回答