关于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>

事件总线

待补充