Vue、React和小程序中的组件通信：父传子和子传父的应用

序言：

组件化开发是将一个大型应用程序拆分成独立的、可重用的、可组合的模块，使得开发人员可以快速构建和开发应用程序。组件化开发提倡将应用程序的各个功能模块分离开发，每个模块完成自己的功能并且可以在不同的应用程序中被复用。这可以提高代码的可维护性、可测试性和可重用性，同时也可以使得开发和协作更加高效。其中父传子和子传父是常见的通信方式。

以下是在vue、react、小程序中如何实现父传子和子传父的组件通信。

一、Vue

1. 父传子

在Vue中，父组件通过props属性向子组件传递数据。父组件使用v-bind指令绑定数据到子组件的props上，子组件则通过props接收这些数据并在内部使用。

示例代码：

// 父组件
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    ChildComponent
  }
};
script>
 
// 子组件
<template>
  <div>
    {{ message }}
  div>
template>
 
<script>
export default {
  props: ['message']
};
script>

2. 子传父：

在Vue中，子组件通过$emit方法触发自定义事件，并将需要传递给父组件的数据作为参数。父组件可以在子组件标签上监听这些自定义事件，并在对应的方法中处理数据。

示例代码：

// 子组件
 
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello Parent!');
    }
  }
};
script>
 
// 父组件
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  div>
template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出：Hello Parent!
    }
  },
  components: {
    ChildComponent
  }
};
script>

二、React

1. 父传子

在React中，父组件通过将属性传递给子组件来实现父传子。父组件将数据作为属性传递给子组件，在子组件中通过this.props访问这些属性。

示例代码：

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
 
class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent message="Hello React!" />
      div>
    );
  }
}
 
// 子组件
import React from 'react';
 
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.message}
      div>
    );
  }
}

2. 子传父

在React中，子组件通过调用父组件传递的方法并传递需要传递给父组件的数据来实现子传父。父组件将一个方法作为属性传递给子组件，在子组件中通过调用这个方法并传递参数来触发父组件中对应的处理函数。

示例代码：

// 子组件
import React from 'react';
 
class ChildComponent extends React.Component {
  handleClick() {
    this.props.onChildClick('Hello Parent!');
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点击按钮button>
      div>
    );
  }
}
 
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
 
class ParentComponent extends React.Component {
  handle子事件(data) {
      console.log(data); // 输出：Hello Parent!
    }
    
  render() {
    return (
      <div>
        <ChildComponent onChildClick={this.handleChildEvent.bind(this)} />
      div>
    );
  }
}
 
// 渲染组件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

三、小程序

1. 父传子

在小程序中，父组件通过在wxml中使用属性来传递数据给子组件。父组件可以在子组件的标签上设置属性，然后子组件可以通过this.properties接收这些属性。

示例代码：

// 父组件
// parent.wxml
  <child-component message="{{message}}" />
 
// parent.js
Page({
  data: {
    message: 'Hello Mini Program!'
  }
});
 
// 子组件
// child-component.wxml
<view>
  {{ message }}
view>
 
// child-component.js
Component({
  properties: {
    message: String
  }
});

2. 子传父

在小程序中，子组件通过触发父组件绑定的自定义事件，并将需要传递给父组件的数据作为参数来实现子传父。父组件可以在子组件标签上监听这些自定义事件，并在对应的方法中处理数据。

示例代码：

// 子组件
// child-component.wxml
  <button bindtap="handleClick">点击按钮button>
 
// child-component.js
Component({
  methods: {
    handleClick() {
      this.triggerEvent('customEvent', { data: 'Hello Parent!' });
    }
  }
});
 
// 父组件
// parent.wxml
<view>
  <child-component bind:customEvent="handleCustomEvent" />
view>
 
// parent.js
Page({
  handleCustomEvent(event) {
    console.log(event.detail.data); // 输出：Hello Parent!
  }
});

注意：小程序需要在pages 文件夹下index 页面 （记住是页面）中引入这个组件，引入的时候路径 就不需要在写 index.js 因为文件的默认查找就是 index.js

index.json ：

{
  "componet": true, //开启子组件使用
  "usingComponents": {
    "componentA": "../../component/header"  //定义子组件名字并引入子组件
  }
}

结论：本文讲解了在vue、react、小程序中如何进行组件通讯，通过组件化开发可以使自己的代码更加的简介、明了、易维护、易复用、提高开发效率。希望本文对您理解和运用组件通信有所帮助