组件

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

  },

})

巴特西

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

组件

自定义组件

1.创建

2.声明组件

3.辑组件

comp.wxml

4.注册组件

comp.js

使用自定义组件

1.引入组件

test.json

2.页面使用组件

test.wxml

组件将事件传给页面

comp.wxml

comp.js

test.wxml

test.js

最新文章

热门文章