组件传值
props父传子：
App：
<template>
<Child :parentdata="PARENTDATA"></Child>
</template>
<script setup>
import { ref } from "vue";
import Child from "@/components/Child.vue";
const PARENTDATA = ref("App 消息");
</script>
Child：
<template></template>
<script setup>
const props = defineProps({
parentdata: {
type: String,
},
});
console.log(props.parentdata);
</script>
useAttrs父传子：
App：
<template>
<Child text="App文本"></Child>
</template>
<script setup>
import Child from "@/components/Child.vue";
</script>
Child：
<template></template>
<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs();
console.log(attrs.text);
</script>props 和 useAttrs 的区别：
emits子传父：
Child：
<template></template>
<script setup>
const emits = defineEmits(["childdata"]);
emits("childdata", "child消息");
</script>
App：
<template>
<Child @childdata="CHILDDATA"></Child>
</template>
<script setup>
import Child from "@/components/Child.vue";
function CHILDDATA(s) {
console.log(s);
}
</script>expose子组件向外暴露：
Child：
<template></template>
<script setup>
import { ref, onMounted } from "vue";
let childtext = ref("子组件暴露的数据");
defineExpose({
childtext,
});
</script>
App：
<template>
<Child ref="CHILDTEXT"></Child>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Child from "@/components/Child.vue";
let CHILDTEXT = ref(null);
onMounted(() => {
console.log(CHILDTEXT.value.childtext);
});
</script>provide / inject 类似消息订阅与发布：
App：
<template>
<Child></Child>
</template>
<script setup>
import { provide } from "vue";
import Child from "@/components/Child.vue";
provide("name", "Andy");
</script>
Child：
<template></template>
<script setup>
import { inject } from "vue";
let info = inject("name");
console.log(info);
</script>