vue3 emit

Question

我像下面定义了一个子组件，点击关闭按钮时visible没有响应到父组件，不知道是那个环节出了问题

<script setup lang="ts">
  const props = withDefaults(defineProps<{
    visible: boolean
  }>(), {
    visible: false
  })
  const state = reactive({
    visible: props.visible
  })
  defineEmits(['update:visible'])
  const { emit } = getCurrentInstance()
  const classes = computed(() => {
    return [
      'v-child',
      {
        'v-child--hidden': !state.visible
      }
    ]
  })
  const closeHandler = () => {
    state.visible=false
    emit('update:visible', state.visible)
  }
</script>
<template>
  <div class="classes">
    child
    <button @click="closeHandler">close</button>
  </div>
</template>

Answer 1

SFC

Answer 2

state 的 visible 干掉就行了。

vue 单向数据流，子组件不应该改，只能emit，然后父组件再传回来