這篇文章帶給大家的內容是關於小程式開發之元件之間的傳值方法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1.建立元件

開啟微信開發者工具，建立元件，會產生四個檔案：wxml,wxss,js,json

在wxml中：

<view>我是组件A</view>

登入後複製

在js中：

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

登入後複製

在json中：

{
  "component": true,
  "usingComponents": {}
}

登入後複製

即元件建立完成

2.引入元件

要在index中引入元件，則

在index.json中：

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

登入後複製

在index.wxml中：

<view>
    <view>微信小程序组件传参</view>
    <componenta></componenta>
</view>

登入後複製

則元件就能夠顯示，要使得元件引入，先要在json中去給元件定義一下才可在wxml中顯示

3.父元件向子元件傳參

宣告：A元件為父元件，B元件為子元件，以下是A元件向B元件傳參：

在A元件中引入B元件

在A元件的json中寫入：

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

登入後複製

在A元件的wxml中寫入：

<view>我是组件A</view>

   子组件内容：

登入後複製

在B元件的js中寫入：

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

登入後複製

即在properties中定義A元件要傳過來的參數類型

#在B元件的wxml中寫入：

<view>
<view>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

登入後複製

總結： A元件向B元件傳參，實際上就是在A元件中引入B元件的時候，帶上一個屬性paramAtoB，並且給其賦值，然後B組件通過這個屬性名稱paramAtoB，獲取其值

4.子組件向父組件傳參

聲明：A組件為父組件，B組件為子元件，以下是B元件向A元件傳參：

要讓子元件給父元件傳參，首先得在父元件引入子元件的時候，加個觸發事件，如下：

在父元件A中wxml:


<view>我是组件A</view>

   A组件内容：
   B组件传入参数：{{paramBtoA}}

登入後複製

myevent就是綁定的觸發事件

在父元件A中js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

登入後複製

onMyEvent就是當被子元件觸發時的函數

在子元件B中wxml:

<view>
<view>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button>向A中传入参数</button>
</view>

登入後複製

button按鈕點擊事件一觸發，就可以傳入參數進入父元件A中，在子元件B中js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

登入後複製

this.triggerEvent就是按鈕點擊之後執行的事件，觸發myevent事件，傳入參數paramBtoA進入父元件

上

###########################################################

小程式開發之元件之間的傳值方法（程式碼範例） 0# 發佈於

【小程式開發】元件間傳值

小程式設計】元件之間傳值

小程式

### 閱讀 · 時所學。 ################################################################################################################################################################################################################### ###0#### ###

# # # # # #

【小程式開發】元件之間傳值

1.建立元件

開啟微信開發者工具，建立元件，會產生四個檔案：wxml,wxss,js,json

在wxml中：

<view>我是组件A</view>

登入後複製

在js中：

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

登入後複製

在json中：

{
  "component": true,
  "usingComponents": {}
}

登入後複製

即元件建立完成

2.引入元件

要在index中引入元件，則

#在index.json中：

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

登入後複製

在index.wxml中：

<view>
    <view>微信小程序组件传参</view>
    <componenta></componenta>
</view>

登入後複製

則元件就能夠顯示，要使得元件引入，先要在json中去給元件定義一下才可在wxml中顯示

3.父元件向子元件傳參

宣告：A元件為父元件，B元件為子元件，以下是A元件傳參在B元件：

在A元件中引入B元件

在A元件的json中寫入：

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

登入後複製

在A元件的wxml中寫入：

<view>我是组件A</view>

   子组件内容：

登入後複製

在B元件的js中寫入：

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

登入後複製

即在properties中定義A元件要傳過來的參數類型

在B元件的wxml中寫入：

<view>
<view>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

登入後複製

總結： A元件向B元件傳參，實際上就是在A元件中引入B元件的時候，帶著一個屬性paramAtoB，並且給其賦值，然後B元件透過這個屬性名稱paramAtoB，取得其值

4.子元件向父元件傳參

宣告：A元件為父元件，B元件為子元件，以下是B元件傳參給A元件：

讓子元件給父元件傳參，首先得在父元件引入子元件的時候，加個觸發事件，如下：

在父元件A中wxml:


<view>我是组件A</view>

   A组件内容：
   B组件传入参数：{{paramBtoA}}

登入後複製

myevent就是綁定的觸發事件

在父元件A中js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

登入後複製

onMyEvent就是當被子元件觸發時的函數

在子元件B中wxml:

<view>
<view>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button>向A中传入参数</button>
</view>

登入後複製

button按鈕點選事件一觸發，就可以傳入參數進入父元件A中，在子元件B中js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

登入後複製

this.triggerEvent就是按鈕點擊之後執行的事件，觸發myevent事件，傳入參數paramBtoA進入父元件

##回報

################### ##############################你可能感興趣的################ ########################################## 時間排序########################載入中...######顯示更多註解######## ###################

以上是小程式開發之元件之間的傳值方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！