【组件化思想】常用框架（react/vue/小程序）的父子通信案例

前言

有个思维/思想：组件化思想，在前端后端等其他技术领域中很重要。

这篇文章提供常用前端框架/技术的父子通信代码示范（体现组件化思想）。

React 组件父子调用

子组件（Button.jsx）

import React from 'react';

const Button = ({ text, onClick, type }) => {
  return (
    <button 
      onClick={onClick} 
      className={`button-${type}`}
    >
      {text}
    </button>
  );
};

export default Button;

父组件（App.jsx）

import Button from './Button'; // 引入子组件

const App = () => {
  const handleSubmit = () => {
    console.log('提交按钮被点击');
  };

  return (
    <div>
      {/* 调用子组件，传递props和事件 */}
      <Button 
        text="提交" 
        onClick={handleSubmit} 
        type="primary"
      />
      
      <Button 
        text="取消" 
        onClick={() => alert('取消')} 
        type="secondary"
      />
    </div>
  );
};

Vue 2 组件父子调用

子组件（components/Button.vue）

<template>
  <button @click="handleClick">
    {{ text }} (Vue2)
  </button>
</template>

<script>
export default {
  props: {
    text: { type: String, default: '按钮' },
    disabled: Boolean // 新增禁用属性
  },
  methods: {
    handleClick() {
      if (!this.disabled) this.$emit('click', { msg: '自定义参数' });
    }
  }
};
</script>

<style scoped>
button { padding: 8px 16px; }
</style>

父组件（Parent.vue）

<template>
  <div>
    <!-- 注册组件 -->
    <Button 
      text="确认" 
      :disabled="isLoading" 
      @click="onButtonClick"
    />
  </div>
</template>

<script>
// 1. 引入组件
import Button from './components/Button.vue';

export default {
  components: { Button }, // 2. 注册组件
  data() {
    return { isLoading: false };
  },
  methods: {
    onButtonClick(e) {
      console.log('接收到子组件事件:', e.msg); // 输出：自定义参数
      this.isLoading = true;
    }
  }
};
</script>

Vue 3 组件父子调用

子组件（components/Button.vue）

<template>
  <button @click="handleClick">
    {{ text }} (Vue3)
  </button>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义props和事件
const props = defineProps({
  text: { type: String, default: '按钮' },
  disabled: Boolean
});
const emits = defineEmits(['click']);

const handleClick = () => {
  if (!props.disabled) emits('click', { time: Date.now() });
};
</script>

<style scoped>
button { background: #409eff; }
</style>

父组件（Parent.vue）

<template>
  <div>
    <!-- 直接使用组件，无需注册（Vue3自动注册） -->
    <Button 
      text="提交" 
      :disabled="isSubmitting" 
      @click="onSubmit"
    />
  </div>
</template>

<script setup>
import Button from './components/Button.vue'; // 引入组件
import { ref } from 'vue';

const isSubmitting = ref(false);

const onSubmit = (e) => {
  console.log('子组件传递的时间戳:', e.time); // 输出时间戳
  isSubmitting.value = true;
};
</script>

微信小程序组件父子调用

子组件（components/Button）

button.js

Component({
  properties: {
    text: { type: String, value: '按钮' },
    size: { type: String, value: 'default' } // 尺寸
  },
  methods: {
    onTap() {
      this.triggerEvent('click', { count: this.data.count });
    }
  },
  data: { count: 0 }
});

button.wxml

<button 
  class="my-button" 
  size="{{size}}" 
  bindtap="onTap"
>
  {{text}} (小程序)
</button>

button,json(声明为组件)

{
  "component": true,
  "usingComponents": {}
}

父页面（pages/index）

index.json(注册组件）

{
  "usingComponents": {
    "my-button": "/components/Button/Button"
  }
}

index.wxml(使用组件)

<view>
  <my-button 
    text="立即购买" 
    size="mini" 
    bind:click="onButtonClick"
  />
</view>

index.js(父组件逻辑)

Page({
  onButtonClick(e) {
    console.log('小程序组件事件参数:', e.detail); // 输出 { count: 0 }
    wx.showToast({ title: '按钮被点击' });
  }
});

小结

案例覆盖了组件定义→注册→调用→通信的完整流程。