vue3组件之间传值

1.父子组件之间的传值：props

//父组件
<template>
  <Message  :msg="msg" />
</template>
<script setup>
import Message from "./Message.vue"
 const msg= ref('给子组件的信息');
 //const msg = reactive(["给子组件的信息"])
</script>
//Message子组件
<template>
    <div></div>
</template>
<script setup>
 //获取值  需要通过defineProps暴露出来
 const props = defineProps({
    msg: String,
    //msg：{
       //type:String,
       //default:''
    //}
  });
console.log(props)
</script>

2.子组件向父组件传值emit

//父组件
<template>
  <Message  @getMsg="getmsg"  />
</template>
<script setup>
import Message from "./Message.vue"
const getmsg = (msg)=>{
  console.log(msg)
}
</script>
//Message子组件
<template>
    <div @click="postMsg">向父组件传值</div>
</template>
<script setup>
  const emit= defineEmits(["getMsg"])
  const postMsg=()=>{
    emit('getMsg','向父组件传值')
  }
</script>

3.父组件获取子组件的属性或者调用子组件方法ref

//父组件
<template>
  <Message  ref="message" />
</template>
<script setup>
import Message from "./Message.vue"
const message= ref(null)
onMounted(() => {
    console.log(message.value.msg)
    message.value.showMsg()
});
</script>
//Message子组件
<template>
    <div></div>
</template>
<script setup>
  defineExpose({
    msg:''子组件属性值'',
    showMsg(){
      console.log('子组件方法')
    }
  });
</script>

4.provide/inject 启用依赖注入 实现跨级访问祖先组件的数据

//父组件
<template>
  <Message  />
</template>
<script setup>
import Message from "./Message.vue"
import { provide } from "vue"
provide("msg", "父组件信息")
</script>
//Message子组件
<template>
    <div></div>
</template>
<script setup>
 import { inject } from 'vue';
 let msg= ref()
 msg= inject('msg') //接收参数
 console.log(msg)
</script>