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

第一种:
 

<!-- 子组件 -->

<el-dialog
            v-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: string
    type: string
    modelValue: 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-dialog
            v-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: string
    type: string
    modelValue: boolean
    sendData: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)
}

相关推荐

  1. vue3+TS中子组件怎么组件

    2024-03-18 21:42:03       46 阅读
  2. Vue实现组件组件

    2024-03-18 21:42:03       35 阅读
  3. VUE组件组件进行

    2024-03-18 21:42:03       34 阅读
  4. vue3组件组件

    2024-03-18 21:42:03       60 阅读
  5. vue3组件如何给子组件

    2024-03-18 21:42:03       33 阅读
  6. 请说明Vue组件组件的方法

    2024-03-18 21:42:03       39 阅读
  7. uniapp子组件组件

    2024-03-18 21:42:03       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-18 21:42:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-18 21:42:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-18 21:42:03       82 阅读
  4. Python语言-面向对象

    2024-03-18 21:42:03       91 阅读

热门阅读

  1. Vue3 使用Pinia 存入与取出数据

    2024-03-18 21:42:03       39 阅读
  2. 算法笔记p93_进制转换

    2024-03-18 21:42:03       40 阅读
  3. linux进程 crash之后 ulimit -c unlimited

    2024-03-18 21:42:03       43 阅读
  4. 人工智能主要有哪些领域?

    2024-03-18 21:42:03       38 阅读
  5. C++ 工厂模式

    2024-03-18 21:42:03       41 阅读
  6. 【P5737】【深基7.例3】闰年展示

    2024-03-18 21:42:03       39 阅读
  7. C++不定参数模板、折叠表达式和类型推导

    2024-03-18 21:42:03       44 阅读
  8. 七.pandas处理第三方数据

    2024-03-18 21:42:03       35 阅读
  9. react中点击按钮不能获取最新的state时候

    2024-03-18 21:42:03       43 阅读
  10. 大模型学习中,为什么要把AI当人看?

    2024-03-18 21:42:03       50 阅读
  11. server.servlet.path和#server.servlet.context-path的区别

    2024-03-18 21:42:03       45 阅读
  12. 【C#语言入门】19. 什么是类

    2024-03-18 21:42:03       38 阅读
  13. 使用TOPDN做L53免费域名DNS解析方法

    2024-03-18 21:42:03       47 阅读
  14. Rust矢量数据库领域的优势

    2024-03-18 21:42:03       45 阅读