微信小程序学习11--小程序自定义组件

自定义组件

小程序自定义组件

小程序内置提供了许多组件，同时也允许开发者根据业务需要自定义组件。

小程序自定义组件与页面主要有两点不同：

• 组件对应的 .js 文件中调用 Component 函数

  // 调用 Components 函数，由小程序内置提供
  Component({
    properties: {
      
    },
    data: {
      
    },
    methods: {
      
    }
  })
  

• 组件对应的 .json 文件中，配置 component: true

  {
    component: true,
    usingComponents: {}
  }
  

应用自定义组件：

• 自定义组件可以应用到页面中，也可以被其它组件引用。假设首页需要应用自定义的 mynav 组件：

// pages/index/index.json
{
  "usingComponents": {
    "mynav": "/components/mynav/mynav"
  }
}

<!-- pages/test/test.wxml -->
<view>
  测试自定义组件
</view>

<!-- 自定义组件的使用 -->
<mynav/>

• 业务逻辑处理

// components/mynav/mynav.js
Component({
  // 组件的属性列表
  // 通过 properties 为组件定义属性，需要同时指定类型和默认值
  properties: {
    list: {
      // 标签属性值的类型
      type: Array,
      // 属性没有添加时默认值
      value: ['tom', 'jerry', 'spike']
    }
  },

  // 组件的初始数据,通过 data 为组件初始化数据
  data: {
    start: '[',
    end: ']'
  },

  // 组件的方法列表
  // 通过 methods 为组件定义事件回调，这与页面中定义事件回调是不一致的
  methods: {
    handleTap () {
      this.setData({
        start: '{',
        end: '}'
      })
    }
  }
})

组件间数据交互

自定义组件有自已的作用域，然而在实际开发中，父子组件之间的数据传递是不可避免的。

• 父组件向子组件传递数据，通过自定义组件标签的属性

<!-- pages/index/index.wxml 父组件-->
<view class="box">
   <!-- 应用自定义组件 -->
  <mynav list="{{navs}}" info='nihao'/>
</view>

// pages/index/index.js
Page({
  // 父组件中的数据
  data: {
    navs: ['首页', '登录', '注册']
  }
})

// 子组件
properties: {
    list: {
      // 标签属性值的类型
      type: Array,
      // 属性没有添加时默认值
      value: ['tom', 'jerry', 'spike']
    },
    info: {
      type: String,
      value: 'hello'
    }
  },

• 子组件向父组件传递数据，自定义事件

<!-- pages/index/index.wxml 子组件-->
<view class="box">
   <!-- 应用自定义组件 -->
  <mynav list="{{navs}}" bind:receive-msg="handleMsg" />
</view>

// pages/index/index.js  父组件
Page({
  // 父组件中的数据
  data: {
    navs: ['首页', '登录', '注册'],
    msg: ''
  },
  // 自定义事件的回调
  handleMsg: function (data) {
    console.log('接收子组件传递的数据' + data.detail);
  }
})

• 子组件触发父组件自定义事件

// components/mynav/mynav.js 子组件
Component({
  // ...
  // 组件方法，可用于事件监听回调函数
  methods: {
    handleTap () {
      this.setData({
        start: '{',
        end: '}'
      })
      // console.log(this.data.info)
      // 向父组件传递数据
      this.triggerEvent('receive-msg', 'fruits')
    }
  }
})