Vue父子组件传值_vue3 export default definecomponent 无法获取父组件的值-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46527751/article/details/125104050

这篇博客详细介绍了在 Vue.js 中如何实现父子组件之间的数据传递。子组件通过 `emit` 向父组件发送 `id`，父组件监听该事件并接收值，然后执行删除操作。同时，父组件也能向子组件传递数据，通过 `props` 将数据下传给子组件。示例代码展示了使用 TypeScript 的 Vue 组件中事件触发和属性绑定的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件传值到父组件

子组件：

<template>
<el-dropdown-item divided @click="clickdeletForm">删除</el-dropdown-item>
</template>

<script lang="ts">
export default defineComponent({
  name: "FormItemView",
  emits:["id"],
    setup(props,{emit}) {
    const clickdeletForm = () => {
    emit("id",Id.id)      
    console.log(Id.id);
      
    }
})

</script>

父组件

<template>
<FormItemView v-for="(item, index) in list" :key="item.id" :item="item" :index="index"
//这个是从子组件获取值的函数
 @id="formId" />
<el-button type="primary" @click="clickDeleteForm">删除</el-button>
</template>

<script lang="ts">
export default defineComponent({
    components: { FormItemView },
    setup() {
        const formId = async (val: string) => {
        //这里获取到的就是子组件传来的id
            Id.id = val
            console.log("iod" + val);
        }


    }
})
</script>

父组件传值到子组件

父组件

<template>

    <FormItemView v-for="(item, index) in list" :key="item.id" 
    //这个是传到子组件的值
    :item="item"
    :index="index" @id="formId" />

</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'


export default defineComponent({
    components: { FormItemView },
    setup() {
        let list: IGetItem[] = reactive([])
        
        const clickDeleteForm = async () => {
            let a = await deleteForm(Id)
            console.log("删除")
            if (a.stat == "ok") {
                for (let i = 0; i < list.length; i++) {
                    if (list[i].id == Id.id) {
                    //删除数组中对应元素
                       list.splice(i,1)
                    }
                }
            }
           
        }
        //获取数组时要用push赋值，不能直接等于
        onMounted(async () => {
            let a = await getForm()
            list.push(...a.data.items)
            console.log(list)
        })
        return {
            list,
        }
    }
})
</script>

子组件

<script lang="ts">
import { cancelstarForm, deleteForm, finishCollectForm, starForm, startCollectForm } from '@/service/api'
import { IGetItem, IPostId, IResponse } from '@/type/types'
import getTime from '@/util/DateUtil'
import { ElMessage } from 'element-plus'
import { defineComponent, onMounted, PropType, reactive, ref, toRefs } from 'vue'

export default defineComponent({
  name: "FormItemView",
  //从父组件获取的值，下面传入一个·对象，内部定义类型和是否必传
  props: {
    item: {
      type: Object as PropType<IGetItem>,
      required: true
    }
  },
  emits:["id"],
  setup(props,{emit}) {
  //在setup内部通过props.item. 调用
    const isVisible = ref(props.item.isStar)
    const time = ref(getTime(props.item.ctime))
    const Id:IPostId = reactive({
      id: props.item.id
    })
    const status = ref(props.item.status)
    
    return {
      isVisible,
      time,
      status,
    }
  },
})
</script>