Vue3 setup 组件的基本通信

父组件

<template>
    <div>
        <h1>Hello</h1>
        <one ref="oneref" message="Ok" @SayHello="PentChild"></one>
    </div>
</template>

<script setup lang="ts">
//爷孙通信用 provide  inject
import { ref, provide } from "vue"
import one from "@/components/pentComponents/one.vue"
const oneref = ref(null)


//父类监听方法
function PentChild(value) {
    console.log(value)
    alert("我出来了")
}
//传输的user对象
let user = { name: "陈某人", age: 18, sex: "男" }
//爷孙通信的provide
provide("datas", user)
</script>

<style scoped></style>

儿子组件

<template>
  <div>
    <h1> {{ message }}</h1>
    <button @click="hello">点击我</button>
    <h1>{{ user }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { inject } from 'vue'

const bb = defineProps({
  message: {
    type: String,
    default: "暂无数据"
  }
})
//获取挂在的方法
const emits = defineEmits(["SayHello"])
//发送数据
function hello() {
  emits('SayHello', 1000)
}
//获取User对象
let user = inject("datas")
// 需要给到父组件调用的方法，手动暴露出去
</script>

<style scoped></style>·