父子组件通信

随着组件化开发的盛行，前端开发必备技能之一是父子组件通信。本文详细介绍了在实际开发中，在微信小程序、vue2、vue3技术栈开发项目中父子组件通信的用法。

特性/框架	微信小程序	Vue 2	Vue 3
通信方式	父传子：通过 properties 子传父：通过 triggerEvent	父传子：通过 props 子传父：通过 emit 和 $on（或使用事件总线）	父传子：通过 props 子传父：通过 emit 和 v-on（或使用 provide 和 inject）
用法	父组件：<child my-prop="{``{parentData}}" /> 子组件：properties: { myProp: { type: String } } 子组件触发事件：this.triggerEvent('myEvent', { data: 'some data' });	父组件：<child :my-prop="parentData" @my-event="handleEvent" /> 子组件：props: ['myProp'] 子组件触发事件：this.$emit('myEvent', 'some data');	父组件：<child :my-prop="parentData" @my-event="handleEvent" /> 子组件：defineProps(['myProp']) 子组件触发事件：defineEmits(['myEvent'])( 'some data');
异同点	- 小程序使用 properties 和 triggerEvent - 事件传递通过 triggerEvent，不支持自定义事件系统	- 使用 props 和 $emit - 支持自定义事件系统，可以使用事件总线进行跨组件通信	- 使用 props 和 emit - 支持自定义事件系统，但推荐使用 provide 和 inject 进行跨层级通信
注意事项	- 属性默认值和类型需要在 properties 中声明 - 事件名需要遵循驼峰命名法	- props 需要显式声明 - 使用 $emit 时，事件名需要遵循驼峰命名法 - 事件总线可能导致组件间耦合度增加	- props 需要使用 defineProps 声明 - 使用 emit 时，事件名需要遵循驼峰命名法 - provide 和 inject 用于跨层级通信，但需谨慎使用以避免过度耦合

微信小程序中的父子通信

在微信小程序中，父子组件通信主要通过以下方式实现：

1. 父组件向子组件传递数据 ：通过在子组件的标签上使用properties属性来声明需要接收的数据。
2. 子组件向父组件传递数据 ：通过triggerEvent方法来触发自定义事件，父组件监听这些事件来接收数据。

父传子（数据传递）：

// 父组件
<child-component my-property="{{parentData}}"></child-component>

// 子组件
Component({
  properties: {
    // 属性名
    myProperty: {  
       // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      type: String,      
      // 属性初始值（可选），如果未指定则会根据类型选择一个
      value: 'default value' 
    }
  }
})

子传父（事件传递）：

// 子组件
this.triggerEvent('myevent', { myData: 'some data' });

// 父组件
<child-component bindmyevent="handleEvent"></child-component>
Page({
  handleEvent: function(e) {
  // 输出子组件传递的数据
    console.log(e.detail); 
  }
})

Vue2中的父子通信

在Vue2中，父子组件通信主要通过以下方式实现：

1. 父组件向子组件传递数据 ：通过在子组件标签上使用v-bind或简写:来传递数据。
2. 子组件向父组件传递数据 ：通过在子组件中使用this.$emit来触发自定义事件，父组件监听这些事件来接收数据。

父传子（数据传递）：

// 父组件
<child-component :my-prop="parentData"></child-component>

// 子组件
props: ['myProp']

子传父（事件传递）：

// 子组件
this.$emit('myEvent', 'some data');

// 父组件
<child-component @my-event="handleEvent"></child-component>
methods: {
  handleEvent(data) {
    // 输出子组件传递的数据
    console.log(data); 
  }
}

Vue3中的父子组件通信

在Vue3中，父子组件通信的方式与Vue2类似，但有一些新的特性，如defineProps和defineEmits，这些是编译时的宏，用于声明props和emits。

父传子（数据传递）：

// 父组件
<child-component :my-prop="parentData"></child-component>

// 子组件
const props = defineProps({
  myProp: String
});

子传父（事件传递）：

// 子组件
const emit = defineEmits(['myEvent']);
emit('myEvent', 'some data');

// 父组件
<child-component @my-event="handleEvent"></child-component>
methods: {
  handleEvent(data) {
    console.log(data); // 输出子组件传递的数据
  }
}

异同点总结

• 相同点：

  • 都支持通过属性（properties/props）向子组件传递数据。
  • 都支持通过事件（events/$emit）从子组件向父组件传递消息。

• 不同点：

  • 微信小程序使用Component构造函数来定义组件，而Vue使用Vue.component或单文件组件。
  • Vue3提供了组合式API，使得组件的定义和通信更加灵活和模块化。

关注微信公众号温暖前端，不定期分享前端知识点和前端资料↓↓↓