微信小程序 封装自定义组件

官方文档

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

1. 新建组件

• 建议在根目录新建一个用于存放组件的文件夹

  

1. 注册组件

• 可以全局注册也可以局部注册
  • 全局注册写在 app.json 里即可
  • 局部注册写在对应页面 的 json 文件中
  • 直接写在根部的 {} 即可，上面没有其他包裹

"usingComponents":{
    "product":"/components/product/product"    //组件地址
  },
           

1. 组件之间的传参（页面向组件传递）

• 直接书写传递的参数即可

//-----------------------在引用组件的那个页面中书写-------------------------
<view class="list">
    <product item="{{item}}"/>    // data 数据里面的参数
</view>
           

• 接收参数

  

//---------------在对应组件的 js 文件中书写------------------------------
  properties: {
    item:{ //接受外部传入的item属性（刚刚传递时书写的 item）
      type:Object    //数据类型
    }
           

1. 组件之间的传参（组件向页面传递）

• 组件 js 书写以下 代码（通过事件传参）
• 注意：组件的函数事件是写在 methods 里面的
• 直接通过跳转时传参即可
• 你想点击这个组件以后跳转到某个页面，直接在跳转该页面时传递参数

methods: {   
    toDetail(){
      wx.navigateTo({
        url: '/pages/detail/detail?id='+this.properties.item.id,
      })
    }
  }
           

• 页面接受传递过来的参数
  • options 会接受传递过来的参数（创建文件时自带，无需书写）
  • 后面是的我利用传递过来的参数干了些什么事情