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

这篇具有很好参考价值的文章主要介绍了Vue、React和小程序中的组件通信:父传子和子传父的应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

序言:

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

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

一、Vue

1. 父传子

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

示例代码:

// 父组件
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>
 
<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方法触发自定义事件,并将需要传递给父组件的数据作为参数。父组件可以在子组件标签上监听这些自定义事件,并在对应的方法中处理数据。

示例代码:

// 子组件
<template>
  <div>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>
 
<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
<view>
  <child-component message="{{message}}" />
</view>
 
// 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
<view>
  <button bindtap="handleClick">点击按钮</button>
</view>
 
// 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 :文章来源地址https://www.toymoban.com/news/detail-724079.html

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

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

到了这里,关于Vue、React和小程序中的组件通信:父传子和子传父的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 探索前端跨组件通信:EventBus在Vue和React中的应用

    本文作者系360奇舞团前端开发工程师 事件总线(Event Bus) 是一种用于组件间通信的模式,通常用于解决组件之间的解耦和简化通信的问题。在前端框架中,如 Vue.js,事件总线是一个常见的概念。基本上,事件总线是一个能够触发和监听事件的机制,使得组件能够在不直接依

    2024年02月02日
    浏览(70)
  • Vue中的的通信方式有几种?隔代组件的通信你用那种方式解决?

    props/$emit 适用父子组件通信 ref与parent/children 适用父子组件通信 attrs/listeners,provide/inject 适用于隔代组件通信 vuex,EventBus (事件总线) 适用于父子、隔代、兄弟组件通信 slot 插槽方式 attrs实例 父组件(这时候我们传了两个参数title和type) 子组件(注意:子组件使用了title,那么

    2024年02月14日
    浏览(37)
  • http中的scheme和小程序中的scheme

    scheme就是url中标识协议的部分,可能是http也可能是ftp等。 / 标识path的开始。 ;标识参数的开始,例如: ftp://prep.ai.mit.edu/pub/gnu; type=d ?标识查询的开始,例如: http://www.joes-hardware.com/inventory-check.cgi?item=12731color=blue 问题: ;和 ? 都能够传递键值对,有什么区别? 分号标识

    2023年04月13日
    浏览(33)
  • Vue和小程序的区别

    一.生命周期不一样: 1.1小程序生命周期:onLoad页面加载、onShow页面显示、onReady页面初次渲染完成、onHide页面隐藏、onUnload页面卸载 1..2 vue生命周期:data、mouted、beforeupdate、updated、beforedestory、destroyed 二.数据请求时间不一样: 2.1小程序在onLoad或者onShow中请求数据 2.2 Vue在c

    2024年01月17日
    浏览(35)
  • vue和小程序的异同之处

    Vue和小程序(微信小程序)是两种不同的前端开发框架,它们有一些相似之处,但也有一些主要的区别。 相似之处: 都是用于构建前端应用程序的框架。 都支持组件化开发,将页面拆分成独立的组件进行开发和复用。 都使用了数据绑定的方式来实现视图与数据之间的关联。

    2024年02月03日
    浏览(36)
  • 前端面试:Vue和小程序的区别

    生命周期不一样: 1)小程序生命周期:onLoad页面加载、onShow页面显示、onReady页面初次渲染完成、onHide页面隐藏、onUnload页面卸载 2)vue生命周期:data、mouted、beforeupdate、updated、beforedestory、destroyed 数据请求时间不一样: 1)小程序在onLoad或者onShow中请求数据 2)Vue在created或

    2024年02月08日
    浏览(39)
  • react 组件之间的通信(父子组件)

    React中 组件内调用其他组件不需要进行 类似于vue 声明组件(components) React 组件内调用其他组件 直接将组件导入 放置在对应的JSX 代码中 父子组件通信(传统): 1、父组件-子组件  通过属性传递 2、子组件-父组件  父组件通过将自身的函数对象传递给子组件, 子组件执行父组件

    2024年02月08日
    浏览(67)
  • 面试题-React(七):React组件通信

    在React开发中,组件通信是一个核心概念,它使得不同组件能够协同工作,实现更复杂的交互和数据传递。常见的组件通信方式:父传子和子传父 一、父传子通信方式 父组件向子组件传递数据是React中最常见的一种通信方式。这种方式适用于将数据从一个上层组件传递到其直

    2024年02月11日
    浏览(45)
  • 【React】组件生命周期、组件通信、setState

    ◼ 组件化思想的应用: ​  有了组件化的思想,我们在之后的开发中就要充分的利用它。 ​  尽可能的将页面拆分成一个个小的、可复用的组件。 ​  这样让我们的代码更加方便组织和管理,并且扩展性也更强。 ◼ React的组件相对于Vue更加的灵活和多样,按照不同的

    2024年01月20日
    浏览(43)
  • React 组件通信方式

    人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯。 直接通过属性进行传递,数据的传递可以提高组件的复用性。 通过回调函数(callback)来实现。 ref 标记: 父组件拿到子组件的引用,从而调用子组件的方法

    2024年02月05日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包