vue3 修改父组件prop的值

实现方式

1. 父组件传参的时候需要增加v-model

   <AiAppletModal v-model:show="show" :ai-applet-id="id" />

2. 子组件内增加更新值得事件并在需要修改的时候调用

const emit = defineEmits<{
  (e: 'update:show', visible: boolean): void // 定义修改父组件（prop内）的值的事件
}>()
const showModal = computed({
  get: () => props.show,
  set: (show: boolean) => {
    emit('update:show', show)
  },
})

示例代码

子组件代码：

<script lang="ts" setup>
import { computed } from 'vue'
import { AiAppletEdit } from '@/components/common'
const props = defineProps<{
  show: boolean
}>()
const emit = defineEmits<{
  (e: 'update:show', visible: boolean): void // 定义修改父组件（prop内）的值的事件
}>()
// 更新值父组件传来的值
const showModal = computed({
  get: () => props.show,
  set: (show: boolean) => {
    emit('update:show', show)
  },
})
// watch(show, (newValue, oldValue) => {
//   if (newValue === true)
//     getSystemList()
// })
</script>
<template>
  <NButton @click="showModal = true">
    来吧
  </NButton>
  <NModal v-model:show="showModal">
    <NCard
      style="width: 600px"
      title="模态框"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #headerExtra>
        噢！
      </template>
      <AiAppletEdit />
      <template #footer>
        尾部
      </template>
    </NCard>
  </NModal>
</template>

父组件调用代码：

<script setup lang='ts'>
import { ref } from 'vue'
import { AiAppletModal } from '../../components/'
// import { AiAppletEdit } from '@/components/common'
const id = ref<number | undefined>()
const show = ref<boolean>(false)
function open(appletId: number | undefined) {
  show.value = true
  id.value = appletId
  console.log('查看', appletId)
}
</script>
<template>
  <div>
    <!-- 代码内容 -->
    <!-- 可改变的参数一定要加 v-model -->
    <AiAppletModal v-model:show="show" :ai-applet-id="id" />
    <button @click="open(1)">
      打开1
    </button> |
    <button @click="open(undefined)">
      打开undefined
    </button> |
    <button @click="open(2)">
      打开2
    </button>
  </div>
</template>
<style>
html,body{
  padding: 20px;
  background-color: beige;
}
</style>