小程序开发中组件之间如何传值

　　介绍

小编给大家分享一下小程序开发中组件之间如何传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

1。创建组件

打开微信开发者工具,创建组件,会生成四个文件:wxml, wxs, js, json

在wxml中:

& lt; view>我是组件A

在js中:

组件({ 　　 　　行为才能:[], 　　 　　,,属性:{ 　　,, 　　,,}, 　　,,数据:{ 　　,, 　　,,},//,私有数据,可用于模版渲染//,才能生命周期函数,可以为函数,或一个方法在段中定义的方法名 　　附:才能,function  (), {,}, 　　,,感动:function  (), {,}, 　　分离的才能:function  (), {,}, 　　 　　方法:才能,{ 　　,, 　　,,} 　　 　　})

在json中:

{ 　　“component"才能:,真的, 　　“usingComponents"才能:,{} 　　}

即组件创建完成

2。引入组件

要在索引中引入组件,则

在索引。json中:

{ 　　“usingComponents"才能:,{ 　　,,,“componentA":,“. ./. ./组件/child1/child1" 　　,,} 　　}

在索引。wxml中:

& lt; view> 　　,,,& lt; view>微信小程序组件传参& lt;/view> 　　,,,& lt; componentA /比; 　　& lt;/view>

则组件就能够显示,要使得组件引入,先要在json中去给组件定义一下才可在wxml中显示

3。父组件向子组件传参

声明:一组件为父组件,B组件为子组件,以下是一组件向B组件传参:

<强>在一组件中引入B组件

在一组件的json中写入:

{ 　　“component"才能:,真的, 　　“usingComponents"才能:,{ 　　,,,“componentB":,“. ./child2/child2" 　　,,} 　　}

在一组件的wxml中写入:

& lt; view>我是组件A 　　& lt; view> 　　,,& lt; view>子组件内容:& lt;/view> 　　,,& lt; componentB  paramAtoB=& # 39;我是一个向B中传入的参数& # 39;/比; 　　& lt;/view>

在B组件的js中写入:

组件({ 　　 　　行为才能:[], 　　 　　,,属性:{ 　　,,,paramAtoB:字符串 　　,,}, 　　,,数据:{ 　　 　　,,},//,私有数据,可用于模版渲染//,才能生命周期函数,可以为函数,或一个方法在段中定义的方法名 　　附:才能,function  (), {,}, 　　,,感动:function  (), {,}, 　　分离的才能:function  (), {,}, 　　 　　方法:才能,{ 　　 　　,,} 　　 　　})

即在属性中定义一组件要传过来的参数类型

在B组件的wxml中写入:

& lt; view 风格=& # 39;边界:2 px  solid 灰色;& # 39;比; 　　& lt; view 风格=& # 39;text-align:中心;& # 39;在我是组件B 　　& lt; view>中传入的参数:{{paramAtoB}} & lt;/view> 　　& lt;/view>

<强>总结:一组件向B组件传参,实际上就是在一组件中引入B组件的时候,带上一个属性paramAtoB,并且给其赋值,然后B组件通过这个属性名称paramAtoB,获取其值

4。子组件向父组件传参

声明:一组件为父组件,B组件为子组件,以下是B组件向一组件传参:

要让子组件给父组件传参,首先得在父组件引入子组件的时候,加个触发事件,如下:

<强>在父组件一个中wxml:

& lt; view 风格=& # 39;填充:20 px;边界:2 px  solid 红色;& # 39;比; 　　& lt; view 风格=& # 39;text-align:中心;& # 39;在我是组件A 　　& lt; view> 　　,,& lt; view>一组件内容:& lt;/view> 　　,,& lt; view> B组件传入参数:{{paramBtoA}} & lt;/view> 　　,,& lt; componentB  paramAtoB=& # 39;我是一个向B中传入的参数& # 39;,绑定:myevent=皁nMyEvent"/比; 　　& lt;/view> 　　 　　& lt;/view>

myevent就是绑定的触发事件

<强>在父组件中js:

组件({ 　　 　　行为才能:[], 　　 　　,,属性:{ 　　,, 　　,,}, 　　,,数据:{ 　　 　　,,},//,私有数据,可用于模版渲染//,才能生命周期函数,可以为函数,或一个方法在段中定义的方法名 　　附:才能,function  (), {,}, 　　,,感动:function  (), {,}, 　　分离的才能:function  (), {,}, 　　 　　方法:才能,{ 　　,,,onMyEvent:函数(e) { 　　,,,,,this.setData ({ 　　,,,,,,,paramBtoA: e.detail.paramBtoA 　　,,,,,}) 　　,,,} 　　,,} 　　 　　})

小程序开发中组件之间如何传值