组件
小程序允许我们使用自定义组件的方式来构建页面 类似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 }, })
请发表评论