今天练习TodoList任务列表案例,该案例效果如图所示：

此案例除了根组件App.vue，还有TodoList、TodoInput、TodoButton三个子组件。

因为有视频讲解，在制作TodoList、TodoInput时很顺利，只是在完成TodoButton这个组件时出了点问题。
在点击”全部“、”已完成“、”未完成“三个按钮时，预期的效果不出现，被点击的按钮颜色不变化，没反应。
下面是TodoButton.vue组件的完整代码。

<template><div class="mt-3 btn-container"><div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn" :class="active === 0 ? 'btn-danger' : 'btn-secondary'"@click="onBtnClick(0)">全部</button><button type="button" class="btn" :class="active === 1 ? 'btn-danger' : 'btn-secondary'"@click="onBtnClick(1)">已完成</button><button type="button" class="btn" :class="active === 2 ? 'btn-danger' : 'btn-secondary'"@click="onBtnClick(2)">未完成</button></div></div>
</template>
<script>
export default {name: 'TodoButton',emits: ['update:active'],props: {active: {type: Number,required: true,default: 0,},},
//return 和后面的语句this.$emit('update:active', index)在同一行的话，不执行methods: {onBtnClick(index) {if (index === this.active) return this.$emit('update:active',index)},},
}
</script>
<style scoped >
.btn-container {width: 400px;text-align: center;
}
</style>

经过一番排错，发现问题出在methods部分。

     methods: {onBtnClick(index) {if (index === this.active) return this.$emit('update:active',index)},},

上面的代码如果从return的后面换行，改成下面的格式，程序就可以正常的执行。

    methods: {onBtnClick(index) {if (index === this.active) returnthis.$emit('update:active',index)},},

我试了好几次，都是如此。
真是奇怪！我去翻了return语句的语法格式，发现return和后面的返回值可以是不换行的。

为什么到了 this.$emit(‘update:active’,index)这里就必须从return后换行才可以呢？