微信小程序引用自定义组件及传值

当多个页面需要重复使用某一功能模块时，可将该功能模块抽象成自定义组件，以便在不同的页面中重复使用。

引用自定义组件：

创建自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

同时也可以在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。
项目目录结构：

子组件的位置：components/cardItem/cardItem.js的代码如下

Component({
  properties: {
    // 这里是从父组件传递过来的参数
  },
  data: {
    // 这里是一些组件内部数据
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

cardItem.json

{
  "component": true
}

父组件引用子组件cardItem

index.json代码
{
  "usingComponents": {
    "component-tag-name":"../../components/cardItem/cardItem"
  }
}

index.wxml代码

<view class="container">
   <component-tag-name></component-tag-name>   
</view>

编写组件样式时，需要注意以下几点：

#a { } /* 在组件中不能使用
[a] { } /* 在组件中不能使用
button { } /* 在组件中不能使用
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效

页面与组件之间传值

父组件向子组件传值( properties )，子组件向父组件传值（ this.triggerEvent() ）

例如：
父页面给子组件传递一个name=“Ali”，子组件给父组件传递一个函数方法onCreateProces,并且带参数1212
代码如下：
通过wxml设置data-[参数名]传递参数，[参数名]只能是小写
父组件.wxml文件

<view >
    <children-item 
        name="Ali" 
        bind:onCreateProces="onCreateProces" 
        data-project-id="500"
     />
 </view>

父组件.js文件

onCreateProces(event){
  let projectId = event.currentTarget.dataset.projectId//500 父组件本身的值
  let params = event.detail //1212 子组件传过来的值
}

子组件.wxml文件

<view catchtap="onAddClick">
     <text>{{name}}</text>
     <image  src="../../img/add.png" alt="添加"></image>
</view>

子组件.js文件

Component({
  properties: {
    name:{
        type:String
    }
  },
  methods: {
    onAddClick(){
      //传值给父组件  事件名 参数值
      this.triggerEvent("onCreateProces",1212)
     },
  }
})