您可以通过在子组件的方法中修改父组件的数据来控制父组件中的simtu和simti盒子的显示。首先,在子组件的方法中使用$emit方法将事件发送给父组件,然后在父组件中监听该事件,并在监听函数中修改ishow1和ishow2的值。

在子组件Sidebar中的btnclick1和btnclick2方法中,添加发送事件的代码:

const btnclick1 = () => {
  ishow1.value = true;
  ishow2.value = false;
  $emit('change-show', { ishow1: ishow1.value, ishow2: ishow2.value });
}

const btnclick2 = () => {
  ishow2.value = true;
  ishow1.value = false;
  $emit('change-show', { ishow1: ishow1.value, ishow2: ishow2.value });
}

在父组件中监听change-show事件,并在事件处理函数中修改ishow1和ishow2的值:

watchEffect(() => {
  if (child.value) {
    ishow1.value = child.value.ishow1;
    ishow2.value = child.value.ishow2;
  }
})

const handleChangeShow = (data) => {
  ishow1.value = data.ishow1;
  ishow2.value = data.ishow2;
}

在父组件模板中,绑定change-show事件和handleChangeShow方法:

<sidebar @change-show="handleChangeShow"></sidebar>

最后,在simtu和simti盒子上使用v-show指令根据ishow1和ishow2的值进行显示和隐藏:

<div class="simtu" v-show="ishow1">
  <!-- 省略其他内容 -->
</div>

<div class="simti" v-show="ishow2">
  <!-- 省略其他内容 -->
</div>

这样,当点击子组件Sidebar中的btnclick1和btnclick2方法时,会触发change-show事件,父组件会监听该事件并修改ishow1和ishow2的值,从而控制simtu和simti盒子的显示和隐藏。

如何通过点击子组件sidebar中的btnclick1和btnclick2方法去控制父组件中simtu和simti盒子的显示一个显示的话另一个不显示子组件template el-card class=box-card v-show=ishow div class=btmtop el-button type=primary plain style=width 50;height 5;

原文地址: http://www.cveoy.top/t/topic/jfOf 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录