微信小程序父子组件之间传值有两种：

1.父组件向子组件传值

2.子组件向父组件传值

区别：

父向子传值使用的是属性绑定，子组件中的properties对象进行接收父组件传递过来的值。
子向父传值使用的是自定义事件，父组件通过自定义事件中的事件对象e来接收子组件传递过来的值。

父组件向子组件传值

1.1 在父组件的.json文件中导入子组件

  "usingComponents": {"childpart":"/components/childpart/childpart",}

1.2 在子组件的.json文件中，把自己定义为子组件

{"component": true,
}

2. 1 在父组件的wxml中，子组件进行引用：

给组件起的自定义名字是 childpart ,渲染的时候在父组件里写上一组 <childpart></childpart> 标签，就可以把子组件渲染到父组件。

2.2 我们在父组件.js文件的数据data 中定义两个数据，nameValue:'lizi', ageValue:18

 data: {nameValue:"lizi",ageValue:18},

2.3 在父组件的wxml文件中把这个数据传递给子组件 childpart。绑定属性值( name,age)，并传递想要给子组件的值( nameValue,ageValue)

<childpart name="{{nameValue}}" age="{{ageValue}}"></childpart>

3. 在子组件中的js中使用 properties 获取值，这样就可以在子组件中用获取到这个值了

 // 接受父组件传递过来的值properties: {name:{type:String,value:''},age:{type:Number,value:''}},

4. 可以在子组件的wxml页面中引用看看是否传递成功了

父组件页面显示如下：

子组件向父组件传值

1. 先在子组件childpart.js的data 数据中定义一个数据 msg:

 data: {msg:'我是子组件的值'},

2. 在子组件wxml 中放一个按钮，并绑定一个事件 sendMsg

<!-- 点击按钮向父组件传值 -->
<button bindtap="sendMsg">点击按钮向父组件传值</button>

3. 在childpart.js中定义一下这个sendMsg ，并传值：

 methods: {sendMsg(){this.triggerEvent('sendMsg',this.data.msg)}},

4. 传值使用的是 this.triggerEvent() ，sendMsg 就是传递给父组件的自定义事件名称，然后在父组件中绑定一下这个事件bindsendMsg="sendMsg"

<childpart name="{{nameValue}}" age="{{ageValue}}" bindsendMsg="sendMsg"></childpart>

5.在父组件的 js 文件中定义sendMsg方法，并传递事件对象 e

 // 父组件接受子组件传递过来的值sendMsg(e){console.log(e.detail);},

子组件传递过来的值使用 e.detail就可以获取到了

【微信小程序】父子组件之间传值相关推荐

微信小程序父子组件通讯/传值
3种方式: 属性绑定:父组件向 --> 子组件的指定属性设置数据.仅能设置json兼容的数据,如:基本数据类型.object等 (不能传递复杂属性的数据,如:方法等). 事件绑定:子组件向 ...
微信小程序父子组件传值问题
微信小程序父子组件传值问题把自己碰到的问题或者学到的东西在这里总结,慢慢积累在父子组件传值时,我发现子组件竟然拿不到父组件传过来的值. 我指的拿不到父组件的值,是指在子组件的生命周期created ...
可以实现微信小程序父子组件实时通信的插件
小程序在组件化开发的时候可能没有达到vue那样的便捷,例如跨组件状态同步等. 这个插件可以: 1.通过代理的方式,为小程序添加了跨组件实时通信:父子组件实时同步状态功能: 2.与vue相似的Watch ...
微信小程序父子组件通信
父子组件之间有3种通信方式 1.属性绑定用于父组件向子组件的指定属性设置数据,只能传递普通类型的数据,无法将方法传递给子组件 2.事件绑定用于子组件向父组件传递数据,可以传递任意数据①在父组件的j ...
微信小程序父子组件相互通信
父组件传值给子组件在父组件中引用子组件 {"component": true,"usingComponents": {"alert-tip" ...
微信小程序父子通讯、传值 triggerEvent
一.父组件给子组件传值分三步 1父组件定义变量: 2父组件传递变量: 3子组件接收变量: 一.定义.传递变量 Page({data: {tabsList:[{ id:1, name:'一一', is ...
微信小程序父子组件通信详解
1 父组件向子组件传递数据: 1.1 在父组件的文件夹中的.json文件下引入子组件 {"usingComponents": {//"Tab" 是自己定义的组件 ...
微信小程序父子组件方法调用方法汇总
父组件向子组件传值父组件通过属性传值 <childEle childParams="{{params}}"></childEle> 子组件通过proper ...
微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...

【微信小程序】父子组件之间传值