父子组件通信

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

特性/框架 微信小程序 Vue 2 Vue 3
通信方式 父传子:通过 properties 子传父:通过 triggerEvent 父传子:通过 props 子传父:通过 emit$on(或使用事件总线) 父传子:通过 props 子传父:通过 emitv-on(或使用 provideinject
用法 父组件:<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');
异同点 - 小程序使用 propertiestriggerEvent - 事件传递通过 triggerEvent,不支持自定义事件系统 - 使用 props$emit - 支持自定义事件系统,可以使用事件总线进行跨组件通信 - 使用 propsemit - 支持自定义事件系统,但推荐使用 provideinject 进行跨层级通信
注意事项 - 属性默认值和类型需要在 properties 中声明 - 事件名需要遵循驼峰命名法 - props 需要显式声明 - 使用 $emit 时,事件名需要遵循驼峰命名法 - 事件总线可能导致组件间耦合度增加 - props 需要使用 defineProps 声明 - 使用 emit 时,事件名需要遵循驼峰命名法 - provideinject 用于跨层级通信,但需谨慎使用以避免过度耦合
微信小程序中的父子通信

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

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

父传子(数据传递):

javascript 复制代码
// 父组件
<child-component my-property="{{parentData}}"></child-component>

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

子传父(事件传递):

javascript 复制代码
// 子组件
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来触发自定义事件,父组件监听这些事件来接收数据。

父传子(数据传递):

javascript 复制代码
// 父组件
<child-component :my-prop="parentData"></child-component>

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

子传父(事件传递):

javascript 复制代码
// 子组件
this.$emit('myEvent', 'some data');

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

Vue3中的父子组件通信

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

父传子(数据传递):

javascript 复制代码
// 父组件
<child-component :my-prop="parentData"></child-component>

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

子传父(事件传递):

javascript 复制代码
// 子组件
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,使得组件的定义和通信更加灵活和模块化。

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

相关推荐
鱼樱前端16 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少1 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix1 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易1 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全