vue3中setup组件拆分

在Vue3中，父子组件之间的数据交互通常通过props和emit机制进行。以下是具体的操作步骤： 1. **父组件向子组件传递数据**： 在父组件（parent.vue）中，导入子组件（child.vue），然后在`data`函数中定义需要传给子组件的数据，接着在`components`对象中注册子组件，并在`props`选项中声明接收的数据： ```javascript import ChildComponent from '@/components/ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { parentData: '这是从父组件传递的数据', // 父组件的数据 }; }, methods: {}, // 如果有处理子组件触发事件的函数，这里也可以定义 }; ``` 在父组件模板中使用`v-bind`或简写的`:`来绑定数据： ```html <child-component :data="parentData"></child-component> ``` 2. **子组件向父组件传递数据或请求结果**： 子组件（child.vue）通过`props`接收到父组件的数据，如果有需要修改或通知的行为，通常会通过`emits`事件发射出去： ```javascript import { ref } from 'vue'; export default { props: ['data'], // 接收父组件的数据 emits: ['childUpdated'], // 定义子组件要触发的事件 setup(props) { const childValue = ref(props.data); // 使用ref存储值，可能需要操作这个值 // 当子组件需要更新时，使用 `emit` 触发事件： function updateChildData(newData) { childValue.value = newData; this.$emit('childUpdated', newData); } return { childValue, updateChildData }; } }; ``` 3. **父组件监听子组件事件**： 在父组件的模板中监听子组件发出的事件，然后根据需求更新父组件的数据或做相应处理： ```html <child-component :data="parentData" @childUpdated="handleChildUpdate"></child-component> ... methods: { handleChildUpdate(newData) { this.parentData = newData; // 更新父组件的数据 } } ```

在 Vue 3 中，可以通过 `props`、`emit` 和 `provide / inject` 三种方式来实现组件之间的数据传递。 1. 使用 `props` 传递数据 在父组件中使用 `props` 属性来传递数据，子组件中通过 `props` 接收数据。父组件可以在子组件中使用 `v-bind` 来绑定数据。 ```vue <!-- 父组件 --> <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` 监听事件并处理。 ```vue <!-- 子组件 --> <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` 可以在祖先组件中提供数据，在后代组件中注入数据，可以跨越多个层级传递数据。 ```vue <!-- 祖先组件 --> <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> ``` 以上是三种常见的组件之间数据传递方式，在实际开发中可以根据具体情况选择合适的方式。