微信小程序 - 组件 | 自定义组件 | 组件事件传递页面

 

组件

小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件

自定义组件

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

1.创建

1.创建components文件夹

2.在components文件下创建comp1文件夹

3.comp1 文件夹下创建Component文件

2.声明组件

首先需要在 json 文件中进行自定义组件声明

{
    "component": true,  // 会自动生成
}

 

3.辑组件

与其他页面一样 在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

comp.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<text>{{innerText}}</text>

 

4.注册组件

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

comp.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

// compinent 类似页面js文件中的的 page
// properties 类似页面的js文件中的 data

 

使用自定义组件

1.引入组件

在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

test.json

{
  "usingComponents": {
    "comp": "/components/comp/comp"  // 组件路径
  },
  "navigationBarTitleText": "自定义组件"  // 组件页面台头名
}

 

2.页面使用组件

test.wxml

<comp innerText='重新赋值'></comp>  
<!--主页引用组件时,可以重新给组件中的变量重新赋值-->

 

组件将事件传给页面

组件中:

comp.wxml

<button bind:tap="click"  data-ss="123">按钮</button>  // 按钮会渲染到页面

 

comp.js

组件的事件要在组件的js文件中的methods方法属性中实现

methods: {
    click: function (e) {
      // console.log(e)
      this.triggerEvent("icre", { "index": 323 }, {})
    }
  }
// triggerEvent 关键字用于将事件传递给页面
// icer (可自定义) 页面通过 bind:icre 获取组件事件
// { "index": 323 } 为组件事件携带的数据

 

页面中:

test.wxml

<comp bind:icre="click"></comp>

 

test.js

Page({
   data{
    num:0, 
}，
// 页面实现 icer 事件
click: function (e) {
    console.log(e)
    this.setData({
      num: this.data.num + 1
    })
    // this.data.num = this.data.num+1
  },

})