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

2022-04-18 22:00:03

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 頁面向自定義元件傳遞資料(父傳子)

注意點：

1.properties中：是寫其他頁面傳過來的變數

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的值
    } 
  },
  /**
   * 元件的初始資料
   */
  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.js
Page({
  data: {
    num:0
  },
  jia:function(e){
    this.setData({
      num: this.data.num + 1
  })
  }
})

以上就是微信小程式自定義元件與頁面的相互傳參的詳細內容，更多關於微信小程式自定義元件頁面傳參的資料請關注it145.com其它相關文章！