vue3+TS中子组件怎么向父组件传值

本文主要是介绍vue3+TS中子组件怎么向父组件传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

第一种：
 

<!-- 子组件 --><el-dialogv-model="visible"left:close-on-click-modal="false":show-close="true"width="900":before-close="handleClose">
</el-dialog>const selfEmit = defineEmits(['update:modelValue','send-data'])const props = defineProps<{ title: stringtype: stringmodelValue: boolean
}>()const visible = ref(false) // 弹框显示watch(() => props.modelValue, (newValue) => {visible.value = newValue
})const handleCurrentChange = (val: any) => {selectedValue.value = val
}const confirm = () => {if(!selectedValue.value ){return ElMessage.error('请点击表格，选择接口信息！')}selfEmit('send-data',selectedValue.value)selfEmit('update:modelValue', false)
}

<!-- 父组件 -->
<interfaceAndTarget v-model="displayInfo" :type="boxType" :title="title" @send-data="sendData"></interfaceAndTarget>const title = ref('') 
const boxType = ref('0')
const displayInfo = ref(false)const sendData = (data:any) => {console.log('6666',data)
}

第二种：

<!-- 子组件 -->
<el-dialogv-model="visible"left:close-on-click-modal="false":show-close="true"width="900":before-close="handleClose">
</el-dialog>const selfEmit = defineEmits(['update:modelValue'])
const props = defineProps<{title: stringtype: stringmodelValue: booleansendData:Function
}>()const visible = ref(false) watch(() => props.modelValue, (newValue) => {visible.value = newValue
})const handleCurrentChange = (val: any) => {selectedValue.value = val
}const confirm = () => {if(!selectedValue.value ){return ElMessage.error('请点击信息！')}props.sendData(selectedValue.value)selfEmit('update:modelValue', false)
}

<!-- 父组件 --><interfaceAndTarget v-model="displayInfo" :type="boxType" :title="title" :sendData="sendData"></interfaceAndTarget>const title = ref('') 
const boxType = ref('0')
const displayInfo = ref(false)const sendData = (data:any) => {console.log('6666',data)
}

这篇关于vue3+TS中子组件怎么向父组件传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---