微信小程序零基础入门--->自定义组件

用户5899361

发布于 2020-12-07 15:17:54

1K0

发布于 2020-12-07 15:17:54

文章被收录于专栏：学习java的小白

一、新建自定义组件

类似于页面，一个自定义组件由json、wxml、wxss、js四个文件组成

1、先建一个文件夹和pages在同级目录

2、创建里面的目录

3、创建里面的文件

4、打开js文件可以看到自定义组件和页面的区别

自定义组件的js文件页面的js文件

5、在所需要引用页面的json文件中声明标签

6、在页面中引用组件

二、组件的js事件

1、页面的.js文件中存放js事件放在和data同级

2、组价的.js文件存放js事件放在methods中

3、使用下面代码请结合上面的demo代码一起使用

head.js

// commons/head/head.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    head:[
      {
        id:0,
        name:"首页",
        flag:true
      },
      {
        id:1,
        name:"新闻",
        flag:false
      },
      {
        id: 2,
        name: "资讯",
        flag: false
      },
      {
        id: 3,
        name: "反馈",
        flag: false
      }
    ]
  },

  /**
   * 组件的方法列表
   * 1、页面的.js文件中存放js事件放在和data同级
   * 2、组价的.js文件存放js事件放在methods中
   */
  methods: {
     /**
     *使用js写法  通过传参比较然后修改对象的值
     */
    // click(e){
    //   //获取点击的id
    //   const ids = e.currentTarget.dataset.operation;
    //   //循环data中的数组
    //   for(let i=0;i<this.data.head.length;i++){
    //     //判断点击的id和数组中的id是否一致
    //     if (ids === this.data.head[i].id){
    //       this.setData({
    //         //修改点击对象的值，注意这里必须在对象外面加中括号[]，否则报错
    //         ['head[' + i + '].flag']:true
    //       })
    //     }else{
    //        //修改点击对象的值，注意这里必须在对象外面加中括号[]，否则报错
    //       this.setData({
    //         [ 'head[' + i + '].flag']: false
    //       })
    //     }
    //   }
    // }
    /**
     * 使用foreach循环修改，通过下标进行改变
     */
   click(e){
     //获取下标
     const {index} = e.currentTarget.dataset;
     //获取data中的数组，注意这里{}里写的head和你data里数组的名称一样
     //let {head}=this.data相当于let head=this.data.head
    let {head}=this.data;
     head.forEach((v, i) => i === index ? v.flag = true : v.flag = false);
     //注意这里一定要写不然值不会改变
     this.setData(
       {
         head
       }
     )
   }
  }
})

head.wxml

<view >
  <view class="head_title">
  <!-- 使用js中传id方法的话请把这个注释解开 -->
    <!-- <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-operation="{{user.id}}">{{user.name}}</view> -->
    <!-- 通过下标确定点击的值 -->
    <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-index="{{index}}">{{user.name}}</view>
  </view>
</view>

三、父向子传递数据

1、head为组件

head.js

// commons/head/head.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 要从父组件接受的数据
     */
    aaa:{
      //数据类型 String
      type:String,
      //默认值
      value:""
    },
    head:{
      //数据类型数组
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },

  /**
   * 组件的方法列表
   * 1、页面的.js文件中存放js事件放在和data同级
   * 2、组价的.js文件存放js事件放在methods中
   */
  methods: {
     /**
     *使用js写法  通过传参比较然后修改对象的值
     */
    // click(e){
    //   //获取点击的id
    //   const ids = e.currentTarget.dataset.operation;
    //   //循环data中的数组
    //   for(let i=0;i<this.data.head.length;i++){
    //     //判断点击的id和数组中的id是否一致
    //     if (ids === this.data.head[i].id){
    //       this.setData({
    //         //修改点击对象的值，注意这里必须在对象外面加中括号[]，否则报错
    //         ['head[' + i + '].flag']:true
    //       })
    //     }else{
    //        //修改点击对象的值，注意这里必须在对象外面加中括号[]，否则报错
    //       this.setData({
    //         [ 'head[' + i + '].flag']: false
    //       })
    //     }
    //   }
    // }
    /**
     * 使用foreach循环修改，通过下标进行改变
     */
   click(e){

     //获取下标
     const {index} = e.currentTarget.dataset;
     //获取data中的数组，注意这里{}里写的head和你data里数组的名称一样
     //let {head}=this.data相当于let head=this.data.head
    let {head}=this.data;
     head.forEach((v, i) => i === index ? v.flag = true : v.flag = false);
     //注意这里一定要写不然值不会改变
     this.setData(
       {
         head
       }
     )
   }
  }
})

head.wxml

<view >
  <view class="head_title">
  <!-- 使用js中传id方法的话请把这个注释解开 -->
    <!-- <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-operation="{{user.id}}">{{user.name}}</view> -->
    <!-- 通过下标确定点击的值 -->
    <!-- <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-index="{{index}}">{{user.name}}</view>
  </view> -->
  <!--获取父组件传递的信息String类型-->
  <view>{{aaa}}</view>
   <!--获取父组件传递的信息Array类型-->
   <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-index="{{index}}">{{user.name}}</view>

  </view>
</view>

2、demo为页面

demo.js

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    head: [
      {
        id: 0,
        name: "首页",
        flag: true
      },
      {
        id: 1,
        name: "新闻",
        flag: false
      },
      {
        id: 2,
        name: "资讯",
        flag: false
      },
      {
        id: 3,
        name: "反馈",
        flag: false
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

demo.wxml

<!--
  1.父组件（页面）向子组件传递数据通过标签属性方式来传递
    1.1 在子组件上进行接收
    1.2 把数据当做data中的数据直接使用即可，在子组件中的wxml中使用
-->
<head head="{{head}}" aaa="123"></head>

四、子向父传递数据

通过上述代码我们可以看出，点击效果已有，但是出现一个问题我们所期望的值没有进行修改，这里是因为我们在子组件中保存了一份数据，父组件中的值并没有修改。

head.js

// commons/head/head.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
    head:{
      //数据类型数组
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },

  /**
   * 组件的方法列表
   * 1、页面的.js文件中存放js事件放在和data同级
   * 2、组价的.js文件存放js事件放在methods中
   */
  methods: {
   
   click(e){
      /**
     * 点击触发父组件中的自定义事件，同时传递数据给父组件
     * this.triggerEvent("父组件自定义事件名称",要传递的参数)
     */
    //获取索引
     const {index} = e.currentTarget.dataset;
     //点击触发父组件中的自定义事件，同时传递数据给父组件
     this.triggerEvent("intemChang", { index });
   }
  }
})

head.wxml

<view >
  <view class="head_title">
   <!--获取父组件传递的信息Array类型-->
   <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-index="{{index}}">{{user.name}}</view>

  </view>
</view>

demo.js

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    head: [
      {
        id: 0,
        name: "首页",
        flag: true
      },
      {
        id: 1,
        name: "新闻",
        flag: false
      },
      {
        id: 2,
        name: "资讯",
        flag: false
      },
      {
        id: 3,
        name: "反馈",
        flag: false
      }
    ]
  },

  handIntemChang(e){
    const {index}=e.detail;
    let { head } = this.data;
    head.forEach((v, i) => i === index ? v.flag = true : v.flag = false);
    //注意这里一定要写不然值不会改变
    this.setData(
      {
        head
      })
  }
})

demo.wxml

<!--
  子向父传递数据通过事件方式传递
  1.在子组件标签上加入一个自定义事件
-->
<head head="{{head}}" bindintemChang="handIntemChang"></head>

五、自定义组件slot属性

slot标签其实就是一个占位符，等到父组件调用子组件时候在进行传递标签，最终被传递的标签会替换掉slot标签

子组件head.wxml

<view >
  <view class="head_title">
   <!--获取父组件传递的信息Array类型-->
   <view wx:for="{{head}}" wx:for-item="user" wx:key="id" class="title_item {{user.flag?'flag':''}}" bindtap="click" data-index="{{index}}">{{user.name}}</view>
    <slof></slof>
  </view>
</view>

父组件demo.wxml

<head head="{{head}}" bindintemChang="handIntemChang"></head>
<block wx:if="{{head[0].flag}}">0</block>
<block wx:elif="{{head[1].flag}}">1</block>
<block wx:elif="{{head[2].flag}}">2</block>
<block wx:else="{{head[3].flag}}">3</block>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript