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:属性', 新值)）。
   • 示例代码                                                                                                                         
      
        
      
      
      
      
      
       {{ myProp }}  
      
2. 子传父：
   • 使用$emit：子组件通过调用内建的$emit方法并传入事件名称来触发一个事件，父组件可以通过v-on:或@方法监听子组件的自定义事件，并在事件回调函数中处理数据。
   • 使用$parent：子组件可以通过this.$parent访问父组件，但这种方式并不常用，因为它可能导致组件的耦合性过高。
   • 示例代码                                                                                                                           
      
       Send Data  
      
      
      
      
      
        
      

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为组件通信提供了更多的灵活性和选择性。