Vue3父子组件传值完全指南：ref与reactive的新用法

"vue3 父子组件传值详解" Vue3相较于Vue2在数据响应式和组件通信方面有了显著的变化，主要引入了`ref`和`reactive`概念。在Vue2中，父子组件之间的通信主要依赖于`props`（父传子）和`$emit`（子传父）。然而，在Vue3中，由于`setup`函数的出现，这些机制发生了改变。 在Vue2的示例中，父组件通过`props`将`title`传递给子组件，并监听`getChildren`事件来接收子组件的值： ```html <!-- 父组件 --> <template> <div> <children :title="title" @getChildren="getChildren"></children> <div>子组件说：{{ childrenAsk }}</div> </div> </template> <script> import Children from "./children.vue"; export default { data() { return { title: "我是父组件传过来的值", childrenAsk: "", }; }, methods: { getChildren(val) { this.childrenAsk = val; }, }, }; </script> ``` 子组件接收`title`并触发`getChildren`事件： ```html <!-- 子组件 --> <template> <div> <div>父组件传过来的值：{{ title }}</div> <button @click="askToFather">点击发送给父组件</button> </div> </template> <script> export default { props: { title: { type: String, }, }, data() { return { askMsg: "这是我给父组件说的话", }; }, methods: { askToFather() { this.$emit("getChildren", this.askMsg); }, }, }; </script> ``` 在Vue3中，由于`setup`函数的使用，不再有`this`上下文，因此无法直接访问`$props`和`$emit`。Vue3提供了`props`参数和`context`对象来处理这些问题。`props`参数包含了父组件传递的所有属性，而`context`对象则包含`attrs`、`slots`、`emit`等。 Vue3的父组件传递值到子组件基本保持不变，依然是通过`props`： ```html <!-- 父组件 --> <template> <div> <ChildComponent :title="title" /> </div> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent }, setup() { const title = ref("我是父组件传过来的值"); return { title }; }, }; </script> ``` 子组件接收值并发送事件则需要使用`emit`： ```html <!-- 子组件 --> <template> <div> <div>父组件传过来的值：{{ title }}</div> <button @click="askToParent">点击发送给父组件</button> </div> </template> <script> import { ref, onMounted } from "vue"; export default { props: { title: { type: String, }, }, setup(props, { emit }) { const askMsg = ref("这是我给父组件说的话"); const askToParent = () => { emit("sendToParent", askMsg.value); }; onMounted(() => { // 初始化时可以执行一些操作 }); return { askMsg, askToParent }; }, }; </script> ``` 在这个例子中，`ref`用于创建响应式的数据，`onMounted`是在组件挂载后执行的钩子函数。子组件通过`emit('sendToParent', value)`来触发自定义事件，父组件通过`v-on`或`@`监听该事件。 总结起来，Vue3中父子组件的通信方式主要有以下几点变化： 1. `props`仍然用于父组件向子组件传递数据，但在`setup`函数中，需要通过`props`参数获取。 2. `this.$emit`被替换为`emit`，它作为`setup`函数的第二个参数`context`的一个属性。 3. 使用`ref`或`reactive`来创建响应式数据。 4. 需要使用`onMounted`等生命周期钩子替代`mounted`，因为Vue3没有`this`对象。 理解这些变化对于顺利迁移至Vue3至关重要，它能帮助开发者更高效地利用Vue3的新特性进行组件通信。