vue3 setup 子组件接受并修改父组件的值
vue3中 使用setup子组件接收父组件传过来的值,并修改该值父组件<template><add-user v-model:dialogAddVisible="dialogAddVisible" /></template><script setup>import AddUser from './addUser.vue'import { ref, w
·
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>
更多推荐
已为社区贡献4条内容
所有评论(0)