Vue


组件传值

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>

页面列表

ITEM_HTML