微信小程序怎么自定义组件与页面的相互传参

本篇内容介绍了“微信小程序怎么自定义组件与页面的相互传参”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1. 自定义组件

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

官方文档

自定义组件

是不是用的微信的组件感觉很爽啊，如果不够用怎么办？

1.1 创建自定义组件

类似于页面，一个自定义组件由jsonwxmlwxssjs4个文件组成

1.1.1 声明组件

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

{  "component": true}

1.1.2 编辑组件

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

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

<!--componentes/com/com.wxml--><view>我是组件</view><button>按钮组件{{num}}</button>

1.2 使用自定义组件

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

注册-->使用

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

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

注意点：  

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

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

# 组件wxml文件<!--componentes/com/com.wxml--><!-- name值是由页面决定的 --><view>{{name}}大帅逼</view>  # 组件js文件// componentes/com/com.jsComponent({    properties: {    name:{      type: String,//属性的类型      value: 'jeff'  // 属性的默认值，如果页面没有给这个name赋值，就使用这个value的值    }   },    data: {  },#页面中wxml<my-con  title="{{变量名}}"><my-con/> #再组件中   properties: {    title:{      type:String,      value:"你好"    }  }# 页面wsml文件<com name='chary'></com>  //可以是固定值<com name = "{{name1}}"></com> //这里的可以是变量

1.4 组件将事件传给页面(子传父)

组件的方法methods里面

# 组件wxml文件<button bind:tap="click">加一</button># 组件js文件methods: {    click:function(e){      this.triggerEvent("jia1")  // 传递jia1事件，不带参数的      # this.triggerEvent("jia1",{num:e.currentTarget.dataset.num})  //带参数的    }  }# 页面wxml文件 捕获事件<view>{{num}}</view><com bind:jia1="jia"></com># 页面js文件// pages/test1/test1.jsPage({  data: {    num:0  },  jia:function(e){    this.setData({      num: this.data.num + 1  })  }})

“微信小程序怎么自定义组件与页面的相互传参”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！