Vue 2和Vue 3父子组件通信总结

Vue 2和Vue 3在父子组件通信方面提供了多种方法，这些方法各有特点和适用场景。以下是对这两个版本在父子通信方面的总结和归纳：

Vue 2

1. 父传子：
   • 使用props：父组件通过标签属性将数据传递给子组件，子组件通过props选项接收数据。
   • 使用ref和$refs：父组件给子组件加上ref属性，然后在父组件中通过this.$refs.子组件访问子组件实例，直接调用子组件的方法或属性。
   • 使用:属性.sync：Vue 2.3.0+新增的语法糖，用于子组件修改父组件的属性值（需配合this.$emit('update:属性', 新值)）。
   • 示例代码                                                                                                                        <!-- 父组件 -->  
     <template>  
       <child-component :myProp="value"></child-component>  
     </template>  
     <script>  
     export default {  
       data() {  
         return {  
           value: 'Hello from parent'  
         };  
       }  
     };  
     </script>  
      
     <!-- 子组件 -->  
     <template>  
       <div>{{ myProp }}</div>  
     </template>  
     <script>  
     export default {  
       props: ['myProp']  
     };  
     </script>
2. 子传父：
   • 使用$emit：子组件通过调用内建的$emit方法并传入事件名称来触发一个事件，父组件可以通过v-on:或@方法监听子组件的自定义事件，并在事件回调函数中处理数据。
   • 使用$parent：子组件可以通过this.$parent访问父组件，但这种方式并不常用，因为它可能导致组件的耦合性过高。
   • 示例代码                                                                                                                          <!-- 子组件 -->  
     <template>  
       <button @click="sendDataToParent">Send Data</button>  
     </template>  
     <script>  
     export default {  
       methods: {  
         sendDataToParent() {  
           this.$emit('myEvent', 'Hello from child');  
         }  
       }  
     };  
     </script>  
      
     <!-- 父组件 -->  
     <template>  
       <child-component @myEvent="handleData"></child-component>  
     </template>  
     <script>  
     export default {  
       methods: {  
         handleData(data) {  
           console.log(data); // 输出 'Hello from child'  
         }  
       }  
     };  
     </script>

Vue 3

Vue 3在组件通信方面引入了一些新的API和概念，但基本的父子通信方式与Vue 2类似，同时也有一些新的改进和特性。

1. 父传子：
   • 使用defineProps：Vue 3的Composition API中的defineProps函数用于定义组件的props。父组件通过标签属性将数据传递给子组件，子组件使用defineProps接收数据。
   • 使用reactive和ref：Vue 3中，可以使用reactive和ref创建响应式数据，并在父组件中通过标签属性传递给子组件。
2. 子传父：
   • 使用defineEmits：Vue 3的Composition API中的defineEmits函数用于定义组件可以触发的自定义事件。子组件通过调用emit函数并传入事件名称和参数来触发事件，父组件可以通过v-on:或@方法监听子组件的自定义事件。
   • 使用defineExpose：子组件可以使用defineExpose主动暴露其方法或属性给父组件，父组件通过ref和$refs访问子组件实例，然后调用这些暴露的方法或属性。

总结

Vue 2和Vue 3在父子组件通信方面提供了多种方法，包括使用props、$emit、ref、$refs、:属性.sync、defineProps、defineEmits和defineExpose等。这些方法各有特点和适用场景，开发者可以根据项目的具体需求选择最适合的通信方式。同时，Vue 3的Composition API为组件通信提供了更多的灵活性和选择性。