当前位置: 首页 > news >正文

vue子组件获取父组件数据_微信小程序自定义组件问题二:父(页面)子组件之间的通信...

b1a75d4bf78f3ed1acb6383df469c027.png

微信小程序官方文档对这部分已经有了说明:

组件间的基本通信方式有以下几种。

WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。

事件:用于子组件向父组件传递数据,可以传递任意数据。

如果以上两种方式不足以满足需要,父组件还可以通过

this.selectComponent

方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。

但是对于初学者来说有些难以理解,下面我们一步一步来给大家解释。

1.父组件(页面)传值给子组件(含调用子组件的方法)

1.1 方法1——利用子组件属性传递动态数据

模板数据绑定

与普通的 WXML 模板类似,可以使用数据绑定,这样就可以向子组件的属性传递动态数据。

代码示例:

这里是插入到组件slot中的内容

在以上例子中,组件的属性

propA

propB

将收到页面传递的数据。页面可以通过

setData

来改变绑定的数据字段。

注意:这样的数据绑定只能传递 JSON 兼容数据。自基础库版本 2.0.9 开始,还可以在数据中包含函数(但这些函数不能在 WXML 中直接调用,只能传递给子组件)。

下面我们用实例代码来详细说明,不啰嗦,上代码。

页面代码

页面js代码

//index.js

//获取应用实例

const app = getApp()

Page({

data:{

dadVal1:"父组件数据1

相关文章:

  • python获取用户输入_python中使用input()函数获取用户输入值方式
  • python数据分析自学教程_【好程序员】Python数据分析全套视频教程
  • ea 通信图_深入浅出聊聊相干光通信(上)看看中长距如何实现400G传输
  • sublime text3 python找不到文件路径_Sublime text 3 集成python 3 环境配置
  • jsp可以使用iframe_使用 JavaScript Object URL,可以处理图像、音频和视频
  • python xlrd_Python xlrd库常用操作汇总
  • python如何调用文件_python中调用不同文件夹的py文件
  • python windows窗口开发_微软上线《在Windows上使用Python进行开发》教程
  • quartz 动态添加job_spring boot Quartz基于持久化存储的动态管理
  • 学python还是php_米凯seo: 到底是学Python、PHP还是Ruby?
  • python命名空间更改_python命名空间
  • vb 查找word中的字符 单元格坐标_Word天,原来查找和替换功能这么强大
  • python网课答案董付国_Python 董付国
  • 苹果手机运行python_JavaScript_iPhone手机上搭建nodejs服务器步骤方法,一、为在ios上面运行,编译jxco - phpStudy...
  • vba 怎么选择网页中的下拉框_书法、国画中怎么选择用纸?
  • iOS | NSProxy
  • JWT究竟是什么呢?
  • mysql_config not found
  • Terraform入门 - 1. 安装Terraform
  • Webpack入门之遇到的那些坑,系列示例Demo
  • 高度不固定时垂直居中
  • 构建工具 - 收藏集 - 掘金
  • 力扣(LeetCode)56
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 浅谈web中前端模板引擎的使用
  • 从如何停掉 Promise 链说起
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​ssh免密码登录设置及问题总结
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • (2)STM32单片机上位机
  • (2022 CVPR) Unbiased Teacher v2
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (二)WCF的Binding模型
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (三)docker:Dockerfile构建容器运行jar包
  • (十二)devops持续集成开发——jenkins的全局工具配置之sonar qube环境安装及配置
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转)Windows2003安全设置/维护
  • ****** 二 ******、软设笔记【数据结构】-KMP算法、树、二叉树
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET NPOI导出Excel详解
  • .NET开发不可不知、不可不用的辅助类(一)
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • .sdf和.msp文件读取
  • @Import注解详解
  • @value 静态变量_Python彻底搞懂:变量、对象、赋值、引用、拷贝
  • @WebService和@WebMethod注解的用法
  • @软考考生,这份软考高分攻略你须知道
  • [20170705]lsnrctl status LISTENER_SCAN1
  • [Android 13]Input系列--获取触摸窗口
  • [Android]How to use FFmpeg to decode Android f...
  • [Android]使用Retrofit进行网络请求