自定义组件的属性传值

之前index页面中的作品和动态分栏都可以点击更多按钮，然后跳转到对应的tabBar页面，可以通过将更多按钮封装到自定义组件中，并且属性传值，实现不同的显示结果。

新建新组件

新建自定义组件PubTitle
将原本的Pubtitile标签移动到组件的wxml中
wxml：

<view class="pubTitle">
      <view class="txt">作品</view>
        <navigator class="more">更多  ></navigator>
</view>

wxss:

.pubTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.pubTitle .txt {
  font-size: 40rpx;
  position: relative;
  padding-left: 20rpx;
}

.pubTitle .txt::before {
  display: block;
  width: 8rpx;
  height: 34rpx;
  background: red;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15rpx;
}

.pubTitle .more {
  font-size: 34rpx;
  color: #666;
}

注册自定义组件

在index.json中注册:

{
  "usingComponents": {
    "HdView":"/components/HdView/HdView",
    "FtView":"/components/FtView/FtView",
    "PubTitle":"/components/PubTitle/PubTitle"
  }
}

传输不同的值给自定义组件

使用Component 构造器
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
之后在index.wxml原来封装的位置添加自定义组件的标签名，但是两处一个标题是作品，并且点击跳转到作品页，另一个标题是动态，并且跳转到标题页。

自定义标签中添加自定义属性

所以需要在自定义标签中添加自定义属性:
wxml:

        <PubTitle myTitle="参赛作品" myUrl="/pages/works/works"></PubTitle>
    <PubTitle myTitle="比赛动态" myUrl="/pages/dynamic/dynamic"></PubTitle>

自定义组件js接受自定义属性

接着需要从js中接收刚才的自定义属性:
PubTitle.js:

    properties: {
    //myTitle就是自定义的属性名，需要指定属性类型(String/Number/Array/Object/Boolean),
    // 还可以指定value默认值。
    myTitle:{
      type:String,
      value:""
    },
    myUrl:{
      type:String,
      value:""
    }
  },

在properties中声明一个对象用来接收传过来的属性。

自定义组件的wxml中渲染

接着在PubTitle.wxml中将获取到的值渲染出来:
PubTitle.wxml:
因为跳转到tabbar页面，所以需要指定open-type="`reLaunch`"

<view class="pubTitle">
      <view class="txt">{{myTitle}}</view>
        <navigator open-type="reLaunch" class="more" url="{{myUrl}}">更多  ></navigator>
</view>

最后就能实现通过对自定义组件传递不同属性的效果了。