Question

我正在使用ES5开发一个部分在Vue的网站。

我需要将Vue Child组件中的数据发送回父级，向我解释的方式是使用export default {}然而我不断收到语法错误，我不知道为什么因为来自我所看到的，我正在关注Mozillas的推荐。

我的问题组成部分：

    var question = Vue.component('question', {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean
    },
    data: function () {
        return ({
            choice: 0,
            counter: 0,
            finished: false
        });
    },
    export default {
        methods: {
            onClickButton: function (event) {
                this.$emit('clicked', 'someValue')
            },
            postResponse: function () {
                var formData = new FormData();
                formData.append(this.choice);
                // POST /someUrl
                this.$http.post('Study/PostScenarioChoice', formData).then(response => {
                    // success callback
                }, response => {
                    // error callback
                });
            },
            activatePost: function () {
                if (this.counter < this.scenarios.length) {
                    this.counter++;
                }
                else {
                    this.finished = true;
                }
            }
        }
    },
    template:
    `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div >
});

我在浏览器控制台Expected ':'中收到错误，该错误位于export default {

行

非常感谢任何帮助。

Answer 1

您编写的JavaScript语法完全错误。你在这里要做的是将“导出默认值”放在对象键应该去的地方。我将在这里提供正确的代码，但我强烈建议你去学习JavaScript的基础知识，包括数组和对象，以便能够读写正确有效的JavaScript。这是一些适合初学者的好学习材料：

这是固定的Vue组件：

export default Vue.component("question", {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean
    },
    data: function () {
        return ({
            choice: 0,
            counter: 0,
            finished: false
        });
    },
    methods: {
        onClickButton: function (event) {
            this.$emit("clicked", "someValue");
        },
        postResponse: function () {
            var formData = new FormData();
            formData.append(this.choice);
            // POST /someUrl
            this.$http.post("Study/PostScenarioChoice", formData).then(response => {
                // success callback
            }, response => {
                // error callback
            });
        },
        activatePost: function () {
            if (this.counter < this.scenarios.length) {
                this.counter++;
            }
            else {
                this.finished = true;
            }
        }
    },
    template:
        `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div>`
});

Answer 2

实际答案是对所提供信息的简单误解here。在我的实现中使用导出默认值是无关紧要的，但是在我开始注意稍后发布父元素的emit之前，这是不容易看到的。

实际实施情况如下：

    var question = Vue.component('question', {
    props: {
        scenarios: Array,
        scenario: Object,
        post: Boolean,
        counter: Number
    },
    data: function () {
        return ({
            choice: 0,
            finished: false
        });
    },
    methods: {
        onClickButton: function (event) {
            this.$emit('clicked', 'someValue');
        },
        postResponse: function () {
            var formData = new FormData();
            formData.append(this.choice);
            // POST /someUrl
            this.$http.post('Study/PostScenarioChoice', formData).then(response => {
                // success callback
            }, response => {
                // error callback
            });
        }
    },
    template:
        `<div>
                <div v-if="this.finished === false" class="row justify-content-center">
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioLeftImg" />
                        </button>
                    </div>
                    <div class="col-lg-6">
                        <button class="btn btn-light" href="#" v-on:click="this.onClickButton">
                            <img class="img-fluid" v-bind:src="this.scenarios[this.counter].scenarioRightImg" />
                        </button>
                    </div>
                </div>
                <finished v-else></finished>
            </div >`
});

父元素中的接收方法如下：

onClickChild: function (value) {
        console.log(value) // someValue
        this.showTimer = true;
        this.countdownTimer();
        if (this.counter < this.scenarios.length) {
            this.counter++;
        }
        else {
            this.finished = true;
        }
    }

使用VueJS ES5导出默认问题

2 个答案: