vue3+ts+vite项目三种形式父子组件传值的方法（setup(){}、script-setup语法糖、provide和inject）

废话不多说直接上问题，这是最近项目上遇到的一个关于definedProps和context传值的方法，文章仅作记录，欢迎大佬指点。

在vue3中setup有一种简洁式写法Vue3的语法糖<script setup lang="ts">和script标签内使用setup(){}函数

先来说说在常规的setup(){}中怎么去父子传值吧，最近这个项目踩了个坑，没有注意到使用的是setup(){}写法直接去使用了definedProps和definedEmits导致程序一直报错最后也是细心检查找到了问题所在，setup(){}中使用的是context，而<script setup lang="ts">使用的是definedProps和definedEmits这一点各位小伙伴们要细心注意一下。

1.setup(){}子传父

子组件

<template>
  //在vue3中可以不存在跟标签
   <el-button @click="handelClick(something)">子组件</el-button>
</template>

<script lang='ts'>
import { ElButton } from 'element-plus'
export default{
    setup(props,context){
        const handelClick = (something:any)：void =>{
                /*使用context去定义一个函数第一个参数是自定义函数名，第二个参数是要传递的参数*/
                context.emit('getSomething',something)
                }
        return{
            handelClick
             }
    }
}
</script>

父组件

<template>
  //在vue3中可以不存在跟标签
   <Son @getSomething="fatherClick"></Son>
</template>

<script lang='ts'>
import Son from "....."//引入子组件
export default{
    conponents：{ Son },
    setup(props,context){
     const fatherClick = (something:any)=>{
                console.log(something)//子组件的值就传递过来啦！
                }
        return{
           fatherClick
             }
    }
}
</script>

2.<script setup lang="ts">语法糖传值

子组件

<template>
    <el-button @click="handelClick(something)">子组件</el-button>
</template>

<script setup lang='ts'>
import { ElButton } from 'element-plus'
import { definedProps, definedEmits } from 'vue'//使用语法糖才能使用他们
const props = definedProps({
    name:String//举个例子
})
const emit = definedEmits(['getSomething'])
const handelClick = (something:any)=>{
    emit('getSomething',something)
}
</script>

父组件

<template>
  //在vue3中可以不存在跟标签
   <Son @getSomething="fatherClick"></Son>
</template>

<script setup lang='ts'>
import Son from "....."//引入子组件
const fatherClick = (something:any)=>{
    console.log(something)//子组件的值就传递过来啦
}
</script>

3.provide和inject

在多层组件传递参数情况下，provide和 inject 是更好的选择 

/*父组件*/

<script setup lang='ts'>
import { ref, provide } from 'vue'
const name = ref('张三')
provide('name', name)//两个参数第一个是自定义名字，第二个是要传递的参数
</script>

/*父组件下的任意层组件*/
<script setup lang='ts'>
import { ref, inject } from 'vue'
let name2:string = inject('name')//参数为provide自定义的名称
console.log('name2')//张三
</script>