Vue Js：作用域插槽和 IE11 的问题

Question

我的组件如下所示：

<template>
    <div>
        <div v-if="!loaded">
            <p><i class="fas fa-spinner fa-spin"></i> Loading feed</p>
        </div>

        <div v-else>

            <div data-slider ref="feedSlider" v-if="length > 0">
                <div class="swiper-wrapper">
                    <div class="slide" v-for="record in records" :key="record.id">
                        <slot :record="record"></slot>
                    </div>
                </div>
            </div>

            <div v-else>
                <p>There are no records available.</p>
            </div>

        </div>

    </div>
</template>
<script>
    import Swiper from 'swiper';
    import AjaxCaller from '../../mixins/AjaxCaller';
    export default {
        mixins: [AjaxCaller],
        data() {
            return {
                loaded: false,
                records: [],
                length: 0,
            }
        },
        mounted() {
            this.makeCall(this.success, this.failure);
        },
        methods: {
            success(response) {
                this.loaded = true;
                if (!response.data.records) {
                    return;
                }
                this.records = response.data.records;
                this.length = this.records.length;
                if (this.length < 2) {
                    return;
                }
                setTimeout(() => {
                    this.initiateSlider();
                }, 1000);
            },
            initiateSlider() {
                (new Swiper(this.$refs.feedSlider, {
                    effect: 'slide',
                    slideClass: 'slide',
                    slideActiveClass: 'slide-active',
                    slideVisibleClass: 'slide-visible',
                    slideDuplicateClass: 'slide-duplicate',

                    slidesPerView: 1,
                    spaceBetween: 0,
                    loop: true,
                    speed: 2000,
                    autoplay: {
                        delay: 5000,
                    },
                    autoplayDisableOnInteraction: false,
                }));
            },
            failure(error) {
                this.stopProcessing();
                console.log(error);
            }
        }
    }
</script>

导入的 mixin AjaxCaller ，它可以与任何其他组件一起正常工作：

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            method: {
                type: String,
                default: 'post'
            }
        },
        data() {
            return {
                processing: false
            }
        },
        computed: {
            getMethodParams() {
                if (this.method === 'post') {
                    return {};
                }
                return this.requestData();
            },
            postMethodData() {
                if (this.method === 'get') {
                    return {};
                }
                return this.requestData();
            }
        },
        methods: {
            requestData() {
                return {};
            },
            startProcessing() {
                this.processing = true;
                this.startProcessingEvent();
            },
            stopProcessing() {
                this.processing = false;
                this.stopProcessingEvent();
            },
            startProcessingEvent() {},
            stopProcessingEvent() {},
            makeCall(success, failure) {
                this.startProcessing();
                window.axios.request({
                        url: this.url,
                        method: this.method,
                        params: this.getMethodParams,
                        data: this.postMethodData
                    })
                    .then(success)
                    .catch(failure);
            }
        }
    }
</script>

这就是我从视图中调用它的方式：

<feed-wrapper url="{{ route('front.news.feed') }}">
    <div slot-scope="{ record }">
        <p>
            <a :href="record.uri" v-text="record.name"></a><br />
            <span v-text="record.excerpt"></span>
        </p>
    </div>
</feed-wrapper>

在 IE 11（及更低版本）以外的任何浏览器中一切正常。 它甚至可以在 Edge 中使用——从来没有问题。

在 IE 中我得到

[Vue 警告]：无法生成渲染函数：

语法错误：...中的预期标识符

它甚至无法从已mounted的段中执行方法调用。

我将laravel-mix与Laravel一起使用，因此所有内容都是使用带有babel的webpack编译的，因此与 ES6 无关。

我已经花了一整夜试图解开这个谜团，所以任何帮助都将不胜感激。

Answer 1

我知道你已经说过你不相信这是一个 ES6 问题，但证据表明它是。

IE11 不支持解构。 如果您在 IE11 控制台中键入类似var {record} = {}的内容，您将看到同样的错误消息“预期标识符”。

尝试搜索原始错误消息中的已编译代码并查找单词record 。 我怀疑你会发现这样的东西：

fn:function({ record })

如果你看到这意味着解构已经进入浏览器，而没有通过 Babel 编译。

发生这种情况的确切原因取决于您使用该作用域插槽模板的位置。 如果你在单文件组件中使用它，它应该通过 Babel，但如果你不是，那么它可能会在没有转译的情况下进入浏览器。 您说您在“视图内”调用它，但这并没有明确说明您是如何使用它的。 在文档中有一个关于这个的注释，它的价值：

https://v2.vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope

假设您无法直接解决转译问题（例如，通过将模板移动到它将通过 Babel 的某个位置），您可以删除 ES6 解构。 所以像：

<div slot-scope="slotProps">

然后在后面的代码中使用slotProps.record而不是record 。