vue setup

provide和inject 多成层级传输数据（非响应式）:

<script setup> //father
import { ref, provide } from 'vue'  //provide 提供
const name = ref(5) 
provide('name', name) //provide 默认发送的不是响应数据
</script>
 
<script setup> //son
import {inject} from 'vue'    //inject 注入
console.log(inject('name').value)
</script>

defineExpose：暴露方法:

<template>
 <son ref='outRef'> <son/> //获取ref中的子组件方法Click()
 <button @click='myClick '><button/>
</template>
<script setup> //father
import {ref} from 'vue'
const outRef = ref('')
function myClick(){
 outRef.value.Click()
}
</script>
<script setup> //son
import {defineExpose } from 'vue'
function Click(){
 console.log('@click方法')
}
//将方法暴露出
defineExpose({Click})
</script>

defineEmits:子调用father方法

<template>
   <son @selectItem="selectItem"></son>
</template>
<script setup> //father
function selectItem(num){
  console.log(num);
}
</script>

<script setup>  //son
import {defineEmits} from 'vue'        
const emit = defineEmits(['selectItem'])
function choice(num){
   emit('selectItem', num) 
}
</script>

defineProps: 传参 Props：

<template>
     <son :name="mymsg"> </son>
</template>
<script setup> //father
import {ref} from 'vue'<br>
const mymsg=ref("holle world")
</script>
<template>
<div>{{msg.name}}</div>
</template>
<script setup> //son
import {defineProps} from 'vue'
const msg=defineProps({ // 非ts专有声明
    name:{
        type:String,
        default: ''
    }
})
</script>