Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge about "how to customize the mutual reference between components and pages of Weixin Mini Programs (Mini)." In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. custom component

Mini programs allow us to build pages using custom components.

official documentation

custom component

Does it feel good to use WeChat components? What if there is not enough?

1.1 Create custom components

Similar to pages, a custom component consists of jsonwxmlwxssjs4 files

1.1.1 Declaring components

First, you need to declare custom components in the json file

{ "component": true}

1.1.2 编辑组件

同时，还要在wxml文件中编写组件模板，在wxss文件中加入组件样式

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

我是组件按钮组件{{num}}

1.2 使用自定义组件

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

注册-->使用

# json文件中注册{ // 引用声明 "usingComponents": { // 要使用的组件的名称 // 组件的路径 "com": "/componentes/com/com" }}# wxml文件中使用

1.3 页面向自定义组件传递数据(父传子)

注意点：

1.properties中：是写其他页面传过来的变量

2.data中：本页面的变量，属性

# 组件wxml文件{{name}}大帅逼 # 组件js文件// componentes/com/com.jsComponent({ /** * 组件的属性列表 */ properties: { name:{ type: String, //属性的类型 value: 'jeff' // 属性的默认值，如果页面没有给这个name赋值，就使用这个value的值 } }, /** * 组件的初始数据 */ data: { },#页面中wxml #再组件中 properties: { title:{ type:String, value:"你好" } }# 页面wsml文件 //可以是固定值 //这里的可以是变量1.4 组件将事件传给页面(子传父)

组件的方法methods里面

# 组件wxml文件加一# 组件js文件methods: { click:function(e){ this.triggerEvent("jia1") // 传递jia1事件，不带参数的 # this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //带参数的 } }# 页面wxml文件 捕获事件{{num}}# 页面js文件// pages/test1/test1.jsPage({ data: { num:0 }, jia:function(e){ this.setData({ num: this.data.num + 1 }) }})"微信小程序怎么自定义组件与页面的相互传参"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.