vue3+js 父组件控制子组件DOM元素的显示隐藏

一、需求

点击购物车图标，控制购物车列表的显示隐藏

二、遇到的问题

1：购物车图标是父组件，购物车列表是子组件，父组件的事件控制子组件DOM怎么传值
2：给子组件传值后，怎么使用这个值

三、逻辑

父组件中给购物城图标增加点击事件，点击事件的逻辑是：
当购物车数量>0的时候，触发事件（这是判断条件）
在判断条件中将声明的变量(Boolean)取反
我们把这个变量传给子组件
子组件通过props获取这个变量后，props.isShowCart，用watch监听值的变化
在使用watch之前要确认props是ref还是reactive，如果是reactive的话在使用的时候就要解构： 
() => props.isShowcart

四、代码

父组件

<Son :isShowCart="isShowCart" />

const isShowCart = ref(false)
const cartImgClick = () => {
  const isHasData = Object.keys(cartList).length > 0
  if (isHasData) {
    isShowCart.value = !isShowCart.value
    return isShowCart.value
} else {
  alert('无数据')
  }
}

子组件

<div v-if="isShowCartSon === true"></div>
const isShowCartSon = ref(true)
  watch(() => props.isShowCart, (newVal, oldVal) => {
    isShowCartSon.value = newVal
})