小程序自定义组件以及组件传值的简单总结

1、自定义组件
2、使用自定义组件
3、组件传值--->父传子
4、组件传值--->子传父

1、自定义组件

在根目录下创建components文件夹
建议为每个组件都创建一个文件夹，便于区分。例：在components文件在下创建test文件夹
点击test文件夹，点击鼠标右键，选中新建Components，创建组件test，会自动生成组件对应的 4 个文件，后缀名分别为 .js ， .json ， .wxml 和 .wxss。类似于也模板，在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式。注意：在组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。
首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

{"component": true
}

2、使用自定义组件

首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

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

在页面中使用

<test> </test>

3、组件传值—>父传子

父组件，在使用子组件中的地方传递值

data:{dataMsg:{name:'张三',sex:'李四'
}//title直接传递的是写死的字符串，dataMsg是传递的是动态中的数据，是父组件.js文件中的data中的dataMsg
<test title="测试" msg="{{dataMsg}}"> </test>

子组件.js接收传递的值

Component({properties: {msg: {type: Object},title: {type: String}},data: {},/*** 页面的初始数据*/methods: {}
})

子组件使用传递的值

<text>{{title}} {{msg.name}}</text>

4、组件传值—>子传父

父组件

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<test bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<test bind:myevent="onMyEvent" />Page({onMyEvent: function(e){e.detail // 自定义组件触发事件时提供的 detail 对象（接收子组件传递过来的值）}
})

子组件

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>Component({properties: {},methods: {onTap: function(e){//可以consolo.log(e)查看触发onTap事件时传递的值var myEventDetail = {} // detail对象，提供给事件监听函数(需要传递给父组件的值)var myEventOption = {bubbles: false,//事件是否冒泡,默认falsecomposed: false,//事件是否可以穿越组件边界，为 false 时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部,默认falsecapturePhase: false,//事件是否拥有捕获阶段,默认false} // 触发事件的选项this.triggerEvent('myevent', myEventDetail, myEventOption)}}
})

注意：在使用自定义组件+递归的方式实现多级菜单，需要在组件的.json文件中自己引入这个组件（标题2中的步骤1），自己使用自己，不需要再像页面中那样bind:myevent="onMyEvent"（个人理解为绑定一个事件），可以利用触发事件的选项（冒泡，捕获）
（学习小程序自定义组件也有一段时间了，之前在工作中的项目有用到，现在才来总结之前用到的星系。自己在弄递归组件的时候也走了很多弯路，没有及时总结，可能有些地方不太正确，印象没有那么深刻了）

大家也可以自己到微信小程序官方文档上查看学习一下自定义组件链接: 微信小程序自定义组件官方文档

小程序自定义组件以及组件传值的简单总结相关推荐

微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...
微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
小程序自定义导航栏组件
小程序代码片段 ** 效果图 ** 代码片段(点击可直接查看功能实现的全部代码) 小程序代码片段部分代码 wxml <view class="navBar {{navbarData. ...
微信小程序自定义card图文组件
//组件wxml<view class="home-party" style="padding-top:10px;"> <view>&l ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...

小程序自定义组件以及组件传值的简单总结

小程序自定义组件以及组件传值的简单总结

1、自定义组件

2、使用自定义组件

3、组件传值—>父传子

4、组件传值—>子传父

小程序自定义组件以及组件传值的简单总结相关推荐

最新文章

热门文章