小程序自定义组件——创建和使用自定义组件步骤 & 自定义组件属性properties数据列表、data数据、methods方法的用法

小程序自定义组件——创建和使用自定义组件步骤 & 自定义组件属性properties数据列表、data数据、methods方法的用法

• 小程序默认提供的组件（内置组件）
• 如果内置组件没有提供特定功能，我们可以自己实现一个组件来完成自己的一些需求

基本用法

• 创建组件

  • 组件的json配置文件必须添加属性"component": true

• 实现组件模板和样式

• 使用自定义组件（在使用自定义组件的页面中添加如下配置）

  {
    "usingComponents": {
      "my-header": "/components/header/index"
    }
  }
  

  • 在页面模板中，就可以使用自定义组件了

  <my-header>K/my-header>
  

• 动态填充组件模板（从组件内部data中获取数据）

  <view bind:tap='handleTap' class='item' wx:key='{{index}}' wx:for='{{list}}'>
      {{item}}
    </view>
  

• 动态填充组件模板（从组件属性中获取数据）

  <view bind:tap='handleTap' class='item' wx:key='{{index}}' wx:for='{{list}}'>
      {{item}}
  </view>
  

• 处理组件的行为

  • properties组件属性
  • data组件内部数据
  • methods组件内部方法

  // components/header/index.js
  Component({
    /**
     * 组件的属性列表
     */
    properties: {
      list: {
        type: Array,
        value: []
      }
    },
  
    /**
     * 组件的初始数据
     */
    data: {
      start: '【',
      end: '】',
      list: [1, 2, 3]
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
      handleTap: function() {
        console.log('--------')
        // this.data.start = '《'
        // this.data.end = '》'
        this.setData({
          start: '《',
          end: '》'
        })
      }
    }
  })
  
  

  自定义组件写法一

  第一步：在page同层级，新建文件夹components文件夹，在其中自定义组件

  第二步：在其中新建自定义组件文件夹mynav

  第三步：自定义组件结构

  <!-- 自定义组件的模板 ——>
  <view class="mynav">
      <view>头条</view>
      <view>科技</view>
      <view>教育</view>
  </view>
  

第四步：自定义组件样式

.mynav{
    display:flex;
}
.mynav view{
    flex:1;
    height:80rpx;
    line-height:80rpx;
    background:pink;
    text-align:center;
}

第五步：在所需页面进行引入

{
    "usingComponents":{
        "my-nav":"/components/mynav/index"
    }
}

第六步：在所需页面进行使用

</my-nav>

自定义组件写法二

对组件固定数据进行动态修改(在组件文件下的index.js中)

Components({
    //组件的属性列表
    //自定义组件的标签属性值会覆盖默认的属性值
  properties:{
    navData:{
		//type表示组件属性类型
        type：Array,
        //value表示组件属性的默认值
        value：['头条','科技','教育']
    }
  }
})

组件页面进行修改

<!-- 自定义组件的模板 ——>
<!--  <view class="mynav">
    <view>头条</view>
    <view>科技</view>
    <view>教育</view>
</view> ——>

<view class="mynav">
  <view wx:key='{{index}}' wx:for='{{navData}}'
 	   {{item}}
  </view>
</view>

注意：

自定义组件的标签属性值会覆盖默认的属性值

组件属性data的用法，如：组件数据加符号，在组件的index.js文件中

组件data属性用法

组件methods属性用法

结构

方法