Vue3+Ts父子组件传参

 前言

---

vue传参的方式有很多种,不管是vue2还是3，这里给大家展示vue3的几种方式：

1:provide+inject  这是vue3内置方法，他的好处是不管父传子，还是子传父，都可以使用，并且可以不用层层传递。

2：defineProps：类似于vue2的props。

3：defineEmits：类似于vue2的$Emits。

      话不多说，展示代码

 一、provide+inject:

这里的业务是：子组件是一个修改弹窗，在父组件点击按钮，利用变量控制自子组件的的显示。

父组件：       

//这是父组件
import { provide } from 'vue'
// 控制子组件弹窗显示
const editScreenVis = ref<boolean>(false)
//第一个参数是key，通俗点讲就是键值对，在子组件用inject，使用第一个参数就可以获取到值
//第二个参数是你要传过去的值，就是value，也就是const editScreenVis = ref<boolean>(false)中的editScreenVis ，这个变量名不固定，随便起。
provide('editScreenVis', editScreenVis)

//这里是事件，当点击编辑按钮的时候让他的状态为true
const editSreenItem = (scope: ScopeRowList) => {
    editScreenVis.value = true
}

子组件：

//这里使用inject，editScreenVis就是刚所说的第一个参数，这边类型定义我用的是any，当然你们随便
let editScreenVis = inject<any>('editScreenVis')

//如果要关闭弹窗，那就给确定或者取消按钮给一个事件：
const editScreenCan = (FormEl: FormInstance | undefined) => {
//直接修改上面的变量的状态就可以
    editScreenVis.value = false
    FormEl?.resetFields()
}

• 这里使用v-model绑定上面的editScreenVis就可以了

• 这里是成功打开的弹窗：

二、defineprops

• 这里的业务就是纯展示数据，声明：defineprops传值只能用来展示，不能用来在子组件做修改，具体看vue官网:https://cn.vuejs.org/guide/components/props.html

父组件：

//我这里是点击事件，利用scope传值
const passEditScreen = ref<Object>({})

const editSreenItem = (scope: ScopeRowList) => {
    passEditScreen.value = scope
    editScreenVis.value = true
}

//引入子组件，利用冒号:绑定passEditScreen 
 <editDialogs :passEditScreen="passEditScreen"></editDialogs>

子组件：

//声明defineProps用FatherScreenListPass 接收
const FatherScreenListPass = defineProps({
    passEditScreen: {
        type: Object,
        required: true,
    }
})

//使用的时候如下：id、itemid、lampDeviceName是passEditScreen里面带过来的值，这里值比较多，你们直接声明一个对象，然后依次赋值一下就可以，最后绑定到from表单就可以
 FatherScreenListPass.passEditScreen?.id
 FatherScreenListPass.passEditScreen?.itemId
 FatherScreenListPass.passEditScreen?.lampDeviceName
 FatherScreenListPass.passEditScreen?.lamppostId
 FatherScreenListPass.passEditScreen?.name
 FatherScreenListPass.passEditScreen?.productName
 FatherScreenListPass.passEditScreen?.screenSerialNumber

这就是传递过来的值

三、defineEmits:

• 这里的业务是子组件值已经传过来了，要点击确定调用接口修改，更新父组件table列表

子组件:

//声明一个defineEints，这里的passFatheditScreen是标识，一会看父组件
const screenEditPassFath = defineEmits(['passFatheditScreen'])  

// 查询屏幕
const searchScreenHan = async () => {
    await searchScreen({ params: lampPostSearchForm }).then((res: any) => {
//这里就是在子组件点击确定更新完之后，调用接口更新数据，将更新数据的值写到刚声明的const screenEditPassFath = defineEmits(['passFatheditScreen'])，多个值逗号隔开： res.data是数据， res.total是总条数
        screenEditPassFath('passFatheditScreen', res.data, res.total)
    })
}

//点击确定修改
// 编辑屏幕接口
const editScreenHan = async () => {
    await editScreen(addScreenList).then((res: any) => {
        if (res.code !== 200) return ElMessage.error('修改失败,' + res.msg)
        ElMessage.success('修改成功')
        editScreenVis.value = false
    //调用刚刚的查询屏幕
        searchScreenHan()
    })
}

父组件：

//引入子组件，使用@绑定一下子组件defineEmits中的passFatheditScreen，receiveSonValue是一个事件名，随便起就可以。
<editDialogs  @passFatheditScreen="receiveSonValue"></editDialogs>

const searchScreenList = ref<Array<ScopeRowList>>([])
const addSearchTotal = ref<number>(0)

//这里使用receiveSonValue事件，并且依次接收数据，定义类型
const receiveSonValue = (data: Array<ScopeRowList>, total: number) => {
//这两个变量就是一开始就在父组件定义的，直接赋值就行
    searchScreenList.value = data
    addSearchTotal.value = total
}

// 搜索屏幕
const searchScreenHan = async () => {
    await searchScreen({ params: lampPostSearchForm }).then((res: any) => {
        //这两个变量就是一开始就在父组件定义的，上面复赋值更新后，这里就自动更新了
        searchScreenList.value = res.data 
        addSearchTotal.value = res.total
    })
}

以上就是我自己根据琢磨的传值的三种方式，具体业务不同，方式也不同，友友们多多指教。