关于javascript:Vue3组件数据传输

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>

事件总线

待补充