随着组件化开发的盛行,前端开发必备技能之一是父子组件通信。本文详细介绍了在实际开发中,在微信小程序、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 用于跨层级通信,但需谨慎使用以避免过度耦合 |
微信小程序中的父子通信
在微信小程序中,父子组件通信主要通过以下方式实现:
- 父组件向子组件传递数据:通过在子组件的标签上使用
properties
属性来声明需要接收的数据。 - 子组件向父组件传递数据:通过
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中,父子组件通信主要通过以下方式实现:
- 父组件向子组件传递数据:通过在子组件标签上使用
v-bind
或简写:
来传递数据。 - 子组件向父组件传递数据:通过在子组件中使用
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,使得组件的定义和通信更加灵活和模块化。
- 微信小程序使用
关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓