小程式開發之元件之間的傳值方法（程式碼範例）
- 不言轉載
- 2018-12-15 09:52:339759瀏覽
這篇文章帶給大家的內容是關於小程式開發之元件之間的傳值方法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
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中文網其他相關文章！