vue3中 使用setup
子组件接收父组件传过来的值,并修改该值

父组件
<template>
	<add-user v-model:dialogAddVisible="dialogAddVisible" />
</template>
<script setup>
import AddUser from './addUser.vue'
import { ref, watch } from 'vue'
const dialogAddVisible = ref(false)
watch(dialogAddVisible, (val, old) => {
  dialogAddVisible.value = val
  console.log(dialogAddVisible.value)
})
</script>

子组件
<template>
<div v-model='isDialogAddVisible'></div>
</template>
<script setup>
import { reactive, defineProps, defineEmits, watch, ref, toRefs } from 'vue' // 直接复制项目中的代码,有些是当前代码用不到的,请忽略……
const props = defineProps({
  dialogAddVisible: {
    type: Boolean
  }
})
const refProps = toRefs(props)
const emits = defineEmits(['update:dialogAddVisible']) // 此处需写'update'
const isDialogAddVisible = ref(false)
watch(refProps.dialogAddVisible, (val, old) => {
  isDialogAddVisible.value = val
})
watch(isDialogAddVisible, (val, old) => {
  emits('update:dialogAddVisible', val) // 此处的update亦要写
})
</script>
Logo

前往低代码交流专区

更多推荐