Javascript 单击VUE在子组件上无法正常工作

我正在使用VUE，我有一个名为Quote的组件，内部我调用了另一个名为sideBarOptions的组件（子组件），它是一个侧栏，显示在父组件上方，并带有隐藏它的选项

从sideBarOptions中，我有一个名为conditions的属性，设置如下：conditions=false，我想通过简单的@单击将其更改为true，但在关闭sideBarOptions并触发@单击之前，它不会立即工作

这是我的代码：

quote.vue

<template>
 <sideBarOptions :showSidebar=show @closeSideBar="closeSideBar"/>
</template>

export default {
 data() {
  return {
    show: false,
  }
 },
 methods: {
    closeSideBar(value) {
      this.show = value;
    },  
 }
}

<template>
 <div @click="conditions = !conditions">
  <input type="checkbox" id="box-1">
  <label for="box-1">Aceptar</label>
 </div>

 <div class="sideBar">
  <a href="#" class="closeBtn-send-email" @click="closeSideBar()">
    <h2>Envíar Cotización</h2>
    <span>X</span>
  </a>
 </div>
</template>

export default {
 props: {
    showSidebar: Boolean
 },
 data() {
  return {
    conditions: false,
  }
 },
 methods: {
    closeSideBar() {
      this.$emit('closeSideBar', false);
    },
  }
}

导出默认值{
数据（）{
返回{
秀:假,，
}
},
方法：{
关闭侧边栏（值）{
this.show=值；
},  
}
}

sideBarOptions.vue

<template>
 <sideBarOptions :showSidebar=show @closeSideBar="closeSideBar"/>
</template>

export default {
 data() {
  return {
    show: false,
  }
 },
 methods: {
    closeSideBar(value) {
      this.show = value;
    },  
 }
}

<template>
 <div @click="conditions = !conditions">
  <input type="checkbox" id="box-1">
  <label for="box-1">Aceptar</label>
 </div>

 <div class="sideBar">
  <a href="#" class="closeBtn-send-email" @click="closeSideBar()">
    <h2>Envíar Cotización</h2>
    <span>X</span>
  </a>
 </div>
</template>

export default {
 props: {
    showSidebar: Boolean
 },
 data() {
  return {
    conditions: false,
  }
 },
 methods: {
    closeSideBar() {
      this.$emit('closeSideBar', false);
    },
  }
}

接受器
导出默认值{
道具：{
showSidebar:布尔值
},
数据（）{
返回{
条件：假，
}
},
方法：{
closeSideBar（）{
此.$emit（'closeSideBar'，false）；
},
}
}

---

在关闭子组件之前，我不理解它更改的原因。你能帮助我吗？谢谢。

尝试将模型置于复选框中：

<div>
  <input type="checkbox" id="box-1" v-model="conditions">
  <label for="box-1">Aceptar</label>
</div>

接受器

---

另外，一个组件中的多个元素可能是一个问题，所以将其包装在一个div中，假定它只是您的示例

<template>
  <div>
    <div @click="conditions = !conditions">
      <input type="checkbox" id="box-1">
      <label for="box-1">Aceptar</label>
    </div>

    <div class="sideBar">
      <a href="#" class="closeBtn-send-email" @click="closeSideBar()">
        <h2>Envíar Cotización</h2>
        <span>X</span>
      </a>
    </div>
  </div>
</template>

接受器

关闭子组件是什么意思？如何关闭它？这是一个边栏，我通过将变量设置为false来关闭。请在您的父级

引号中显示更多代码。vue

如何关闭

边栏选项。vue

@skribe谢谢，我已经将代码放在显示如何关闭它的地方了