小程序自定义组件（可接收页面数据与样式）————（2019.12.19学习笔记）

首先在目录中右击新建Component,这样小程序编译器就会在目标目录中生成小程序自定义组件的json,wxml,wxss,js四个文件,当然也可以选择直接在某个普通页面的json文件增加一行自定义组件声明(声明代码如下）

"component": true

声明完自定义组件之后，可在组件的wxml,wxss文件上设计组件和组件样式，这里我们先设计组件样式，在wxss中设置一个可让字体大小为50rpx,字体粗细为700的样式（代码如下）

.title_style{
  font-size:50rpx;
  font-weight:700
}

然后为了能让组件接受页面数据和样式且显示，必须要组件的js文件中添加对应的逻辑代码（代码如下）

 properties: {
      title_name:{//数据名称
        type:String,//接受数据类型为String
        value:"默认标题值",//默认值
        }
     
      }，
         externalClasses:['title_class'],//接受的样式名称

在组件的wxml文件中引用新建的title_name和title_class就可以将从页面接受的数据显示在组件上了（代码如下）

<view class="title_style title_class">{{title_name}}</view>

然后需要引用这个自定义组件的话，必须先在对应页面的json文件中usingComponents中写入组件的相对路径与名称（代码如下）

 "usingComponents": {
    "My_Title":"/Accessories/My_Title/My_Title"
  }

接下来为了能从页面传送样式，必须先在对应页面的wxss文件中声明好样式（代码如下）

.red{
  color: red
}
.green{
   color: green
}
.yellow{
   color: yellow
}

最后就可以在对应的页面wxml文件中声明自定义组件，并将wxss文件中的样式名和需要传输的数据写入组件标签中就ok了（代码如下）

<My_Title title_name="呵呵呵" title_class="red"/>

最后实现的效果图如下