父子组件之间的三种通讯方式（小程序）

已于 2022-08-13 20:25:14 修改
阅读量881 收藏 1
点赞数
文章标签： 小程序 微信小程序
于 2022-08-13 20:15:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47936649/article/details/126323373
版权

父子组件之间的三种通讯方式（小程序）

文章目录

三种通讯方式

1.属性绑定
●用于父组件向 子组件的指定属性设置数据，仅能设置JSON兼容的数据
2.事件绑定
●用于子组件向父组件传递数据， 可以传递任意数据
3.获取组件实例.
●父组件还 可以通过this.selectComponent()获取子组件实例对象
●这样就可以直 接访问子组件的任意数据和方法

一、属性绑定

1.属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下:

<view>这是父组件count:{{count}}</view>
//子组件组件
<my-text1 count="{{count}}"></my-text1>
  1. 子组件在properties节点中声明对应的属性并使用。示例代码如下:
  properties: {
    count:Number
  },

//子组件
<view>这是子组件count:{{count}}</view>

二、事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下:
在这里插入图片描述

①在父组件的js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
在这里插入图片描述
②在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
在这里插入图片描述
③在子组件的js 中，通过调用this.triggerEvent(‘自定义事件名称’， { /参数对象/})，将数据发送到父组件
在这里插入图片描述
④在父组件的js 中，通过e.detail获取到子组件传递过来的数据
在这里插入图片描述

三、获取组件实例

可在父组件里调用this.selectComponent(“id或class选择器”)，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器
在这里插入图片描述

三、behavior

**加粗样式**
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不受代码控制
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue】父子组件之间的通信
weixin_44707049的博客
10-19 189
情景 父组件有一个 btnList 数组，里面存放着按钮的名称和按钮的id，现在要把这个数组传入到子组件中进行渲染。 子组件渲染出按钮后，点击按钮，父组件的 h1 标签中会显示出当前点击的按钮是哪一个。 实现 父组件传值给子组件可以使用 props 的方式，但是这种方式只能单向数据传递，即 只能父组件传，子组件接收。 子组件传值给父组件使用 自定义事件 $emit() 。 HTML版 代码 <div id="app"> <father></father> <
Vue.js 父子组件通信的十种方式
热门推荐
Joy_Yue的博客
11-06 2万+
转载微信上的一篇文章 1、prop 这个在我们日常开发当中用到的非常多。简单来说，我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。 浏览器输出 2、$emit 官方说法是触发当前实例上的事件...
vue3_组件间通信方式
最新发布
分享程序相关知识
06-03 1536
vue3组件通信。
父子组件之间的通信
m0_59735348的博客
04-20 3336
1.props / $emit 父组件通过props向子组件传递数据，子组件通过$emit和父组件通信 (1）父组件向子组件传值 props只能是父组件向子组件进行传值，可以显示定义一个或一个以上的数据，可以接收各种数据类型，也可以传递一个函数。 // 父组件 <template> <div id="father"> <son :msg="msgData" :fn="myFunction"></son> &lt...
vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏）
qq_54753561的博客
01-02 1万+
vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏）玩之前创建一个 父组件 和 一个子组件 ，祝您玩的开心，整理了3多个小时，码字不易。
Vue父子组件之间的相互通信
atjw25188的博客
03-06 90
组件是Vue知识体系中最重要的一部分之一，父子组件由于作用域的不同，无法直接对对方的数据进行操作。它们之间的数据传递都是通过中间介质进行的，父组件给子组件传值是通过props属性，而子组件给父组件传值是通过自定义事件。 1.父组件向子组件传值 1 <div id="app"> 2 <parent></...
Angular父子组件以及组件之间通讯 @Input @Ouput @ViewChild
03-06
在这个场景下，父子组件间的通信尤为重要，而`@Input()`, `@Output()` 和 `@ViewChild()` 这三个装饰器就是Angular提供的关键工具，用于组件间的数据传递和视图引用。 `@Input()` 装饰器允许我们将父组件的数据传入...
uniapp组件自定义导航栏（vue父子通讯）
11-25
自定义导航栏组件是通过tabIndex下标来识别所触发的那一模块，为防止服务器压力大内含拦截功能，防止用户多次点击 ！！！此组件支持多端，内置配置demo！！！ ！！！喜欢就给点关注吧 嘻嘻嘻！！！
小程序页面间通信的5种方式
03-29
本篇文章将探讨小程序页面间通信的五种主要方式，以满足在不同场景下的需求。 1. **onShow/onHide + localStorage** 这种方法通过监听页面的`onShow`和`onHide`生命周期事件，结合localStorage来传递数据。当从...
vue2.0组件之间传值、通信的多种方式(干货)
08-28
3. **父子组件之间的传值** - **父组件向子组件传值**：使用`props`属性。在父组件中定义要传递的属性，然后在子组件的`props`选项中声明接收这些属性，如`props: ['number']`。传递数据时，直接将属性赋值给子组件...
微信小程序解决方案- 1 kb javascript覆盖状态管理,跨页通讯,插件开发和云数据库开发-腾讯/ westore
01-26
Westore - 微信小程序解决...setData 再加上各种父子、祖孙、姐弟、姑姑与堂兄等等组件间的通讯会把程序搞成一团浆糊，如果再加上跨页面之间的组件通讯，会让程序非常难维护和调试。虽然市面上出现了许多技术栈编译转
[Vue框架学习笔记]父子组件间的三种通信方式(有实例，速来！)
あなたの可愛い41
10-11 4889
父子组件间的三种通信方式通过props实现通信props静态传递father_props.vuechild_props.vueprops动态传递father_props.vuechild_props.vue 子组件不变通过$ref实现通信father_ref.vuechild_ref.vueprops和$ref的对比$emit实现通信father_emit.vuechild_emit.vue总而言之，说一下三种方法 通过props实现通信 子组件的props选项能够接收来自父组件的数据。props是单项绑定
父子组件通信
brrby
10-28 1032
父子组件通信根组件data传子组件 根组件data传子组件 在子组件使用props属性，然后在使用组件标签时绑定props里的属性到根组件的data数据，这样就可以在模板里使用props的属性当作根组件的data数据使用了 <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">&lt
vue中父子组件通信方式汇总
buhuo7493的博客
03-23 971
1.单向通信 1）prop（父=>子） 父组件通过传递prop,子组件接受后不应该在组件中直接更改（数据不会响应变化），但是如果传递的是引用类型的值，在组件中更改仍然会影响父组件。 2）provide/inject（父=>子、孙） 父组件通过provide选项向子孙组件提供属性、方法，子孙组件通过inject选项注入。同样要避免在子孙组件中直接更改注入的数据。 provide...
vue 常用父子组件通信的几种方式
qq_32900003的博客
08-18 700
props //父组件 <template> <child :content="message"></child> </template> <script> import child from './modal/child' export default { components: { child } } </script> //子组件
Vue学习（二）——父子组件的交互
sadoshi的专栏
07-07 537
前言 如果你对组件的基础不是很了解，请先学习前一篇关于vue的文章，或者去官网学习，否则只会让你越学越乱 父子组件交互 父子组件属性的传递 父子组件的交互通常的模式是：
vue3.0父子组件之间通讯
06-06
Vue 3.0 中，父子组件之间的通讯可以通过 props 和 emit 实现。 1. 父组件向子组件传递数据： 在父组件中使用子组件时，可以通过 props 将数据传递给子组件。具体实现如下： ```vue <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { data() { return { parentMessage: 'Hello from parent' } }, components: { ChildComponent } } </script> ``` 在子组件中，可以通过 props 接收父组件传递过来的数据。具体实现如下： ```vue <template> <div> {{ message }} </div> </template> <script> export default { props: { message: String } } </script> ``` 2. 子组件向父组件传递数据： 在子组件中，可以使用 emit 触发一个自定义事件，并向父组件传递数据。具体实现如下： ```vue <template> <div> <button @click="sendMessage">Send Message</button> </div> </template> <script> export default { data() { return { message: 'Hello from child' } }, methods: { sendMessage() { this.$emit('message', this.message) } } } </script> ``` 在父组件中使用子组件时，可以通过 v-on 监听子组件触发的自定义事件，并在事件处理函数中获取子组件传递过来的数据。具体实现如下： ```vue <template> <div> <child-component @message="handleMessage"></child-component> <div>{{ receivedMessage }}</div> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { data() { return { receivedMessage: '' } }, components: { ChildComponent }, methods: { handleMessage(message) { this.receivedMessage = message } } } </script> ``` 以上就是 Vue 3.0 中父子组件之间通讯的实现方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值