详解微信小程序中组件通讯


Posted in Javascript onOctober 30, 2018

这篇主要讲组件通讯

(1)父组件向子组件传值:

<header title='{{title}}' bind:fn='fn' id='header'></header>

通过title='{{title}}'传向子组件向子组件传递参数

子组件接收参数:

Component({
 properties: {
  title: {    // 属性名 type: Number, // 类型(必填)
   type: String,//目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
  },
  fn: {   
   type: Function,
  },
 },
 data: {
    
 },
 methods: {
  // 子组件调用父组件方法
  childFn() {
   console.log(this.data.title)
   this.triggerEvent("fn");
   //triggerEvent函数接受三个值:事件名称、数据、选项值 
  }
 }
})

methods使用title时 this.data.title 直接就可以获取到

通过 bind:fn='fn'传向子组件向子组件传递方法

方法同样也要在properties接收,methods里定义一个新方法, this.triggerEvent("fn") 接收父组件传递过来的方法

(2)父组件调用子组件数据及方法:

首先在父组件js onReady 生命周期中获取到组件

onReady: function () {
  //获得popup组件
  this.header= this.selectComponent("#header");
},

比如要调用子组件的一个function方法

// 调用子组件方法
 fn(){
  this.header.fn() //子组件的方法
 },

调用子组件数据的话直接 this.header.msg 就可以拿到子组件的数据

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
canvas实现图像放大镜
Feb 06 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
You might like
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
用python与文件进行交互的方法
2018/03/01 Python
python使用代理ip访问网站的实例
2018/05/07 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
linux面试相关问题
2012/08/11 面试题
Java程序员常见面试题
2015/07/16 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
欢迎家长标语
2014/10/08 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
解约证明模板
2015/06/19 职场文书
婚宴领导致辞
2015/07/28 职场文书
教师研修随笔感言
2015/11/18 职场文书