IE / Edge 上 VueJS v-slot 中的对象解构

Question

您知道在 IE11 上进行对象解构的方法吗？

考虑以下代码：

<list entity="ApplicationEntity" api-action="get_internal" v-slot="{item}">
    <list-column title="Name" ordering="name">
        ${ item.name }
    </list-column>
</list>

v-slot="{item}" 部分不适用于 IE（甚至旧版本的 edge）。

为了让它工作，我必须写：

<list entity="ApplicationEntity" api-action="get_internal" v-slot:default="slotProps">
    <list-column title="Name" ordering="name">
        ${ slotProps.item.name }
    </list-column>
</list>

这没什么大不了的，但在更大的模板中，它会对可读性产生重大影响。

一个重要注意：上面的代码是 twig 模板的一部分，因此 html 不是客户端构建过程的一部分。

感谢您的帮助。

编辑

调试VueJS源码后，我看到了生成的代码。

如果我写：

<test v-slot="slotProps">
    ${ slotProps.item.toto }
</test>

生成的代码是：

_c('test',{scopedSlots:_u([{key:"default",fn:function(slotProps){return [_v(_s(slotProps.item.toto))]}}])})

如果我写：

<test v-slot="{item}">
    ${ item.toto }
</test>

它给出：

_c('test',{scopedSlots:_u([{key:"default",fn:function({item}){return [_v(_s(item.toto))]}}])})

所以差异归结为：

function(slotProps)
// vs
function({item})

我了解 IE11，但我不了解 edge 20。

所以如果我尝试：

function test(obj) {
    console.log(obj.item);
}

function test2({item}) {
    console.log(item);
}

test({item: 2});
test2({item: 2});

我在 Chrome 的控制台中有两次 2，但在 IE11 或 Edge 20 上没有。

Answer 1

IE 从来不支持解构，也没有办法 "make it work"。 IE 的 JavaScript 引擎无法读取使用此功能的代码。这就是为什么 IE 如此糟糕而无法与当今的兼容性的部分原因。如果您正在为必须使用 IE 的客户端制作 Web 应用程序，则不能使用解构，并且必须重写代码以与 IE 兼容。

Answer 2

只需将 v-slot="{item}" 更改为 v-slot="{item: item}"，就可以了。原因是 IE 不支持一些新的 ECMAScript 功能，如对象破坏和 shorthand 你想使用的。

注意：{ item: item } 等同于 { item }，但当对象属性与您要分配的变量同名时，它只是一个 shorthand。

IE / Edge 上 VueJS v-slot 中的对象解构

Object destructuring in VueJS v-slot on IE / Edge

internet-explorer

destructuring

internet-explorer-11

vue.js

vuejs2