javascript - VueJS : Issue with scoped slots and 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>

下面是我在 View 中的调用方式:

<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 warn]: Failed to generate render function:

Syntax Error: Expected identifier in ...

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

我将 laravel-mix 与 Laravel 一起使用，所以所有内容都是使用 webpack 与 babel 编译的，所以它不是 ES6相关问题。

我已经花了整整一夜的时间试图解开这个谜题，因此非常感谢任何帮助。

Answer 1

我知道您已经说过您不认为这是 ES6 问题，但有证据表明它是。

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

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

fn:function({ record })

如果你看到这意味着解构已经在没有通过 Babel 编译的情况下到达浏览器。

发生这种情况的确切原因取决于您在何处使用该作用域广告位模板。如果你在一个单文件组件中使用它，它应该通过 Babel，但如果你不这样做，那么它可能会在没有转换的情况下进入浏览器。您说过您将其称为“从 View 内”，但这并不能准确说明您是如何使用它的。文档中有关于此的注释，说明它的值(value):

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

假设您无法直接解决转译问题(例如，通过将模板移动到它将通过 Babel 的某个地方)，您可以只删除 ES6 解构。所以像这样:

<div slot-scope="slotProps">

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