在vue3中把一个vue大组件拆分成几个小的组件怎么传值

在 Vue 3 中，可以通过 `props`、`emit` 和 `provide / inject` 三种方式来实现组件之间的数据传递。

1. 使用 `props` 传递数据

在父组件中使用 `props` 属性来传递数据，子组件中通过 `props` 接收数据。父组件可以在子组件中使用 `v-bind` 来绑定数据。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :message="msg" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      msg: "Hello, World!",
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

2. 使用 `emit` 传递事件

在子组件中使用 `$emit` 方法触发事件，父组件中可以通过 `v-on` 监听事件并处理。

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit("send", "Hello, World!");
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent @send="handleSend" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleSend(message) {
      console.log(message); // 输出：Hello, World!
    },
  },
};
</script>

3. 使用 `provide / inject` 提供和注入依赖

`provide / inject` 可以在祖先组件中提供数据，在后代组件中注入数据，可以跨越多个层级传递数据。

<!-- 祖先组件 -->
<template>
  <div>
    <GrandchildComponent />
  </div>
</template>

<script>
import { provide } from "vue";
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    GrandchildComponent,
  },
  setup() {
    const message = "Hello, World!";
    provide("message", message);
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { inject } from "vue";
import GrandchildComponent from "./GrandchildComponent.vue";

export default {
  components: {
    GrandchildComponent,
  },
  setup() {
    const message = inject("message");
    return { message };
  },
};
</script>

<!-- 后代组件 -->
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  setup(props, { attrs, slots, emit }) {
    const message = inject("message");
    return { message };
  },
};
</script>

以上是三种常见的组件之间数据传递方式，在实际开发中可以根据具体情况选择合适的方式。