微信小程序自定義組件與頁面的相互傳參
1. 自定義組件
小程序允許我們使用自定義組件的方式來構建頁面。
官方文檔
是不是用的微信的組件感覺很爽啊,如果不夠用怎么辦?
1.1 創(chuàng)建自定義組件
類似于頁面,一個自定義組件由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 頁面向自定義組件傳遞數(shù)據(jù)(父傳子)
注意點:
1.properties中:是寫其他頁面?zhèn)鬟^來的變量
2.data中:本頁面的變量,屬性
# 組件wxml文件
<!--componentes/com/com.wxml-->
<!-- name值是由頁面決定的 -->
<view>{{name}}大帥逼</view>
# 組件js文件
// componentes/com/com.js
Component({
/**
* 組件的屬性列表
*/
properties: {
name:{
type: String, //屬性的類型
value: 'jeff' // 屬性的默認值,如果頁面沒有給這個name賦值,就使用這個value的值
}
},
/**
* 組件的初始數(shù)據(jù)
*/
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事件,不帶參數(shù)的
# this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //帶參數(shù)的
}
}
# 頁面wxml文件 捕獲事件
<view>{{num}}</view>
<com bind:jia1="jia"></com>
# 頁面js文件
// pages/test1/test1.js
Page({
data: {
num:0
},
jia:function(e){
this.setData({
num: this.data.num + 1
})
}
})以上就是微信小程序自定義組件與頁面的相互傳參的詳細內容,更多關于微信小程序自定義組件頁面?zhèn)鲄⒌馁Y料請關注腳本之家其它相關文章!
相關文章
Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例
這篇文章主要介紹了Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能,結合完整實例形式分析了Bootstrap前端登錄頁面帶驗證碼界面布局與功能實現(xiàn)相關操作技巧,需要的朋友可以參考下2020-03-03
Javascript對象中關于setTimeout和setInterval的this介紹
Javascript對象中關于setTimeout和setInterval的this介紹,需要的朋友可以參考下2012-07-07
Javascript 判斷兩個IP是否在同一網(wǎng)段實例代碼
javascript功能的強大之處是我們大家有目共睹的,幾天小編向大家介紹Javascript 判斷兩個IP是否在同一網(wǎng)段,感興趣的朋友可以參考一下2016-11-11

