1.父子组件的数据传输
阐明：此处的例子应用并不一定是最佳应用形式，仅为了验证数据的传输
父组件
<template> <p>++++++++++++++++++<b>调用子组件</b>+++++++++++++++++++++</p> <p>子组件调用父组件办法测试，子组件提交即可生成随机数 {{ random }}</p> <p>在调用的子组件定义ref</p> <hello-world :random="random" ref="greeting" @getRandom="getRandom" /></template><script>import HelloWorld from "../components/HelloWorld.vue";import { ref, computed, onMounted, provide, getCurrentInstance } from "vue";export default { components: { HelloWorld }, setup(props, ctx) { // **父组件获取子组件的数据** // const的值为上体面组件定义的ref const greeting = ref(null); onMounted(() => { // **父组件获取子组件的值** console.log(greeting.value.greeting); greeting.value.submitGreeting(); // ++++++++end+++++++++++++++++ }); // **子组件获取父组件的值和办法 // 父组件先定义函数 ==>生成随机数 let random = ref(1); const getRandom = () => { random.value = Math.floor(Math.random() * 100); }; return { random, greeting, getRandom, }; },};</script>子组件
// 次要验证vuex的应用, 和父子兄弟组件之间的交互<template> <input type="text" name="greetings" v-model="greeting" style="margin-right: 20px" /> <button @click="submitGreeting">提交Greeting</button></template><script>import { ref } from "vue";import { useStore } from "vuex";export default { name: "HelloWorld", // **子组件获取父组件的值** props: { random: { type: Number, }, }, // **子组件获取父组件传入的办法** emits: ["getRandom"], setup(props, ctx) { const store = useStore(); const greeting = ref("Hello"); // 将值存入store const submitGreeting = () => { store.commit("submitGreeting", greeting.value); store.commit("increment"); console.log("点击提交Greetings按钮,批改次数+1"); // ++++++++++验证子组件调用父组件的办法++++++++ // 通过emits传入的办法 ctx.emit("getRandom"); // ++++++++++++++++++end+++++++++++++++++++ }; // +++++++++++++验证父组件调用子组件的办法+++++++++++++ // 将组件中的值裸露进来， 否则父组件中无奈应用 ctx.expose({ greeting, submitGreeting }); // ++++++++++++++++++end+++++++++++++++++++ return { greeting, submitGreeting, }; },};</script>跨组件的调用（provide和）
第一层组件
<template></template><script>import { ref, provide } from "vue";export default { setup(props, ctx) { // 生成随机数 let random = ref(1); const getRandom = () => { random.value = Math.floor(Math.random() * 100); }; // provide 和 reject 的应用 provide("user", random); return { random, }; },};</script>跨组件
// 次要验证provide 和reject 的应用<template> <div>我只是想试下provide 和 reject 怎么用 {{ user }}</div></template><script>import { inject } from "vue";export default { name: "Next", setup() { // provide传过来的值 const user = inject("user"); return { user, }; },};</script>事件总线
待补充