时间戳

首页 > 解决方案 > IE / Edge上的VueJS v-slot中的对象解构

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

问题描述

你知道在 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 上没有。

标签： vue.jsinternet-explorervuejs2internet-explorer-11destructuring

解决方案

IE 从来不支持解构，也没有办法让它“工作”。IE 的 JavaScript 引擎无法读取使用此功能的代码。这就是为什么 IE 与当今的兼容性如此臭名昭著的部分原因。如果您正在为必须使用 IE 的客户端生成 Web 应用程序，则不能使用解构，并且必须重写代码以与 IE 兼容。

推荐阅读