微信小程序（2）——自定义组件与组件传参

一、自定义组件

1.根目录下创建components文件夹

2.在components文件夹下创建模块组， 如：myTitle文件夹

3.在myTitle文件夹上右击，选择新建component，起名可以和组件文件夹同样的名字

4.将已经写好的共用wxml复制到myTitle.wxml中，将公共的wxss复制到myTitle.wxss中

5.在需要引入该组件的pages页面中，配置.json文件,例如在index页面使用就要在index.json中配置

6.在index.json中的调用方法：

{
  "usingComponents": {
      "myTitle":"/components/myTitle/myTitle"
  }
}

usingComponents中为组件起名。(起名时不要用原有的关键字)

格式 ---- 组件名：组件的路径

如 ---- “myTitle”:“/component/myTitle/myTitle”

6.在index.wxml中使用该组件

<myheader></myheader>
或者
<myheader/>

二、自定义组件传递参数

1.在使用组件时传递自定义属性，如下：

<PubTitle myTitle="学生作品"></PubTitle>

2.在PubTitle自定义组件的js文件中，接收该自定义属性，如：

 properties: {
     //myTitle就是自定义的属性名，需要指定type（String,Number,Array,Objact）
    myTitle:{
      type:String,
      value:""
    }
  },

3.在PubTitle.wxml中渲染从前端传递来的属性，如：

<view class="pubTitle">
  <view class="txt">{{myTitle}}</view>
  <navigator class="more">更多 ></navigator>
</view>