微信小程序自定義組件與頁面的相互傳參

更新時(shí)間：2022年04月18日 18:36:08 作者：Jeff的技術(shù)棧

這篇文章主要為大家介紹了微信小程序自定義組件與頁面的相互傳參過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪

1. 自定義組件

小程序允許我們使用自定義組件的方式來構(gòu)建頁面。

官方文檔

自定義組件

是不是用的微信的組件感覺很爽啊，如果不夠用怎么辦？

1.1 創(chuàng)建自定義組件

類似于頁面，一個(gè)自定義組件由jsonwxmlwxssjs4個(gè)文件組成

1.1.1 聲明組件

首先需要在json文件中進(jìn)行自定義組件聲明

{
  "component": true
}

1.1.2 編輯組件

同時(shí)，還要在wxml文件中編寫組件模板，在wxss文件中加入組件樣式

注意：在組件wxss中不應(yīng)使用ID選擇器、屬性選擇器和標(biāo)簽名選擇器。

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

1.2 使用自定義組件

首先要在頁面的json文件中進(jìn)行引用聲明。還要提供對應(yīng)的組件名和組件路徑

注冊-->使用

# json文件中注冊
{
    // 引用聲明
  "usingComponents": {
    // 要使用的組件的名稱     // 組件的路徑
    "com": "/componentes/com/com"
  }
}
# wxml文件中使用
<!--pages/test1/test1.wxml-->
<com></com>

1.3 頁面向自定義組件傳遞數(shù)據(jù)(父傳子)

注意點(diǎn)：

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'  // 屬性的默認(rèn)值，如果頁面沒有給這個(gè)name賦值，就使用這個(gè)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
  })
  }
})

以上就是微信小程序自定義組件與頁面的相互傳參的詳細(xì)內(nèi)容，更多關(guān)于微信小程序自定義組件頁面?zhèn)鲄⒌馁Y料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: