微信小程序自定义组件,附带小功能,父子传参

需求 : 复用组件,向组件传参用于设置组件的图片和文字说明.

组件文件步骤 :

1.在项目根目录创建components文件夹

2.在components文件夹里创建组件文件夹,名字随意取,我起的名字为downBtn

3.选中downBtn文件夹右击选择新建Componet

4.填写组件名,我的组件名为downBtn

5.确认组件文件夹是否存在

downBtn组件代码步骤 :

1.Js篇 downBtn.js

在downBtn.js文件里找到properties属性,在properties属性中设置两个属性一个为tuPianDiZhi(图片地址)一个为wenZi(文字说明).

这两个属性为组件从父组件接收的值,属性名为传递时用的属性名,type为tuPianDiZhi和wenZi的数据类型,这里用的是String,说明tuPianDiZhi和wenZi为字符串类型的数据.

具体代码:

  properties: {
    // 图片地址
    tuPianDiZhi:{
      type:String
    },
    // 文字说明
    wenZi:{
      type:String
    }
  },

2.Wxml篇 downBtn.wxml

在downBtn.wxml里设置downBtn组件的结构

具体代码:

<view class="linhengdong-btn">
<image src="{{tuPianDiZhi}}" mode=""/>
<text>{{wenZi}}</text>
</view>

3.Wxss篇 downBtn.wxss

在downBtn.wxss里设置downBtn组件的样式

具体代码:

.linhengdong-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: none;
}
.linhengdong-btn image {
  width: 60rpx;
  height: 60rpx;
}

3.注册组件篇 app.json

在项目根目录下找到app.json文件并打开,设置app.json的配置项"usingComponents"(注意要带上""双引号), 属性名为该组件的标签名,属性值为组件的路径(无需带后缀)

具体代码:

"usingComponents": {
    "downBtn":"./components/downBtn/downBtn"
  },

到这里downBtn组件的部分已经完成接下来是使用的步骤

父组件使用downBtn组件和传递数据的代码步骤 :

1.打开父组件的wxml文件

2.写上downBtn标签也就是组件 并设置tuPianDiZhi和wenZi的两个参数

3.最终downBtn会依据传递图片和文字生成我们想要的样式了