父组件
<template>
<div>
<h1>Hello</h1>
<one ref="oneref" message="Ok" @SayHello="PentChild"></one>
</div>
</template>
<script setup lang="ts">
import { ref, provide } from "vue"
import one from "../components/pentComponents/one.vue"
const oneref = ref(null)
function PentChild(value: any) {
console.log(value)
alert("我出来了")
}
let user = { name: "陈某人", age: 18, sex: "男" }
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)
}
let user = inject("datas")
</script>
<style scoped></style>·