如何创建以及引用
第一步 在根目录下新建组件的文件夹， 如components
第二步 在组件文件夹下新建组件， 可右击点击新建component, 比如我的组件名字为a
第三步 在组件中写你需要的结构以及样式等
第四步 引入到需要的父组件中
比如我想在index中的index.wxml中引入组件a
- 1 找到index.json idnex页面的配置文件
{
"usingComponents": {
"组件的名字自己起名,如 Tab":"找到组件a的相对路径"
}
} - 2 在index.wxml中引入组件
<Tab></Tab> (index.json的那个自己起的名字)
组件直接的通信
父组件向子组件传递数据
- 1 父组件 .wxml中
<Tab 属性=‘属性值’></Tab>
<Tab aa=‘123’></Tab> aa就是父组件要给子组件传递的数据可以是数值、字符串、数组等等 - 2 子组件 a.js
properties: {
// 要接受的数据的名称
aa:{
// type是要接收父组件传递过来的数据类型
type:String,
// value 是默认值
value:""
}
} - 3 子组件就可以拿到数据了， 这里的数据和data中的数据一样使用即可
<text>{{aa}}</text>
子向父传递数据
- 首先我们要准确的知道：
1、组件中的事件回调函数需要在methods中写
2、bindtap 绑定的事件是可以传递data-xx 自定义属性和id的， 通过 event.currentTarget.dataset查看事件接收的data-xx /id - 如何向父组件传递数据：
1、保证正确引入，能正常使用
2、子组件： 在子组件的wxml中添加事件 如child，传递想要传递的数据（通过data-xx / id）
3、子组件的js：在methods接收这个事件 child, 将 第二步传递的数据接收到， 写法： event.currentTarget.xx 查看 , 比如要传index这个变量
4、在父组件中： 在组件标签上自定义一个事件如 <Com bindchange="fn"></Com>, change就是我父组件中的自定义事件的名字 ，注意是“自定义事件”
5、子组件的js ：在 3步将接收到的数据 传给父组件的自定义事件 写法： this.triggerEvent('change',{index}) index 是假设的拿到的变量
6、父组件：对自定义事件做出回应， 写fn函数 通过event.detail 查看并获取5步传过来的数据 例子中是index
总结:
父向子--》通过标签传递属性 子组件就会接收（prototies）
子向父--》 通过事件的方式传递
蟹蟹点赞，关注暴富~~
