Component emitted event "change-bool-side" but it is neither declared in the emits option nor as an "onChange-bool-side" prop.

在Vue.js中，如果你遇到了这个错误信息：

Component emitted event "change-bool-side" but it is neither declared in the emits option nor as an "onChange-bool-side" prop.

这意味着你的组件触发了一个名为 change-bool-side 的事件，但是这个事件没有在父组件的 emits 选项中声明，也没有作为一个 prop 传递给子组件。Vue 3 引入了 emits 选项来明确组件可以触发哪些事件，这是为了提高组件的可预测性和类型安全性。

要解决这个问题，你可以采取以下步骤：

1. 在子组件中声明 emits 选项： 确保子组件的 <script setup> 或 <script> 标签中包含了 emits 选项，并列出所有可以触发的事件。

   <script setup>
   const emit = defineEmits(['change-bool-side']);
   </script>
   

2. 在父组件中监听这个事件： 在父组件的模板中，使用 v-on 或 @ 语法来监听子组件触发的 change-bool-side 事件。

   <template>
     <child-component @change-bool-side="handleBoolSideChange" />
   </template>
   

3. 在父组件中定义事件处理函数： 在父组件的 <script> 部分，定义一个处理 change-bool-side 事件的函数。

   <script>
   export default {
     methods: {
       handleBoolSideChange(newValue) {
         // 处理事件逻辑
       }
     }
   }
   </script>
   

4. 确保事件名称正确： 检查触发事件时使用的名称是否与 emits 选项中声明的名称一致。注意大小写和连字符的使用。

5. 使用 defineProps 来声明 prop： 如果你希望将事件作为 prop 传递给子组件，确保使用 defineProps 来声明它。

   <script setup>
   const props = defineProps({
     onChangeBoolSide: Function
   });
   </script>
   

6. 确保组件之间的通信： 如果事件是通过 props 传递的，确保在子组件中调用这个 prop 函数来触发事件。

   <script setup>
   const props = defineProps({
     onChangeBoolSide: Function
   });
   
   function toggleBoolSide() {
     // 触发事件
     props.onChangeBoolSide(/* 新的布尔值 */);
   }
   </script>
   

通过这些步骤，你应该能够解决这个错误，并确保组件之间的事件通信正常工作。