• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

组件

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

自定义组件

类似于页面,一个自定义组件由 jsonwxml, 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
  },

})

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序简易table组件实现发布时间:2022-07-18
下一篇:
微信小程序UI组件、开发框架、实用库...发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap