微信小程序自定义组件

如何创建以及引用

第一步 在根目录下新建组件的文件夹， 如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）
子向父--》 通过事件的方式传递
蟹蟹点赞，关注暴富~~