Home > Article > WeChat Applet > Value transfer method between components in mini program development (code example)
The content of this article is about the value transfer method (code example) between components in the development of small programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .
1. Create a component
Open the WeChat developer tools and create a component. Four files will be generated: wxml, wxss, js, json
In wxml:
<view>我是组件A</view>
In js:
Component({ behaviors: [], properties: { }, data: { }, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
In json:
{ "component": true, "usingComponents": {} }
That is, the component creation is completed
To index If the component is introduced in index.json:
{ "usingComponents": { "componentA": "../../components/child1/child1" } }
In index.wxml:
<view> <view>微信小程序组件传参</view> <componentA /> </view>
, then the component can be displayed. To import the component, you must first Define the component in json before it can be displayed in wxml
3. Parent component passes parameters to child component
Write in the json of component A:
{ "component": true, "usingComponents": { "componentB": "../child2/child2" } }
In the wxml of component A, write:
<view>我是组件A</view>子组件内容:
In the js of component B, write:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
That is, define the parameter type to be passed by component A in properties
Write in the wxml of B component:
<view style='border:2px solid gray;'> <view style='text-align:center;'>我是组件B</view> <view>A中传入的参数:{{paramAtoB}}</view> </view>Summary:
A component passes parameters to B component. In fact, when B component is introduced into A component, it brings an attribute. paramAtoB, and assign a value to it, and then the B component obtains its value through this attribute name paramAtoB4. The child component passes parameters to the parent component
In order for the sub-component to pass parameters to the parent component, you must first add a trigger event when the parent component introduces the sub-component, as follows:
In parent component A wxml:<view style='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>我是组件A</view>
<view>
<view>A组件内容:</view>
<view>B组件传入参数:{{paramBtoA}}</view>
<componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
</view>
</view>
myevent is the bound trigger event
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据,可用于模版渲染
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}
})
onMyEvent is the function when triggered by the sub-component
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数:{{paramAtoB}}</view>
<button bindtap='change'>向A中传入参数</button>
</view>
As soon as the button click event is triggered, You can pass in parameters into parent component A. In child component 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 is the event executed after the button is clicked, triggering the myevent event. Pass in parameter paramBtoA into the parent component
Small program
read It takes 10 minutes to read[Mini program development] Passing values between components1. Create componentsOpen the WeChat developer tools, Creating a component will generate four files: wxml, wxss, js, json
In wxml:
<view>我是组件A</view>
Component({ behaviors: [], properties: { }, data: { }, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
{ "component": true, "usingComponents": {} }
That is, the component creation is completed
2. Introduce the component
To introduce the component into the index, then
In index.json:
{ "usingComponents": { "componentA": "../../components/child1/child1" } }
In index.wxml:
<view> <view>微信小程序组件传参</view> <componentA /> </view>
Then the component can be displayed. To introduce the component, you must first define the component in json before it can be displayed in wxml
Declaration: A component is the parent component, and B component is the child component. The following is how component A passes parameters to component B:
In component A Introduce B componentWrite in the json of A component:
{ "component": true, "usingComponents": { "componentB": "../child2/child2" } }
<view>我是组件A</view>子组件内容:
In the js of B component Write:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
That is, define the parameter type to be passed from component A in properties Write in wxml of component B:
<view style='border:2px solid gray;'> <view style='text-align:center;'>我是组件B</view> <view>A中传入的参数:{{paramAtoB}}</view> </view>Summary:
A component passes parameters to B component. In fact, when the B component is introduced into the A component, it brings an attribute paramAtoB and assigns a value to it. Then the B component obtains its value through this attribute name paramAtoB.
4. Subcomponent passes parameters to parent component
Declaration: A component is the parent component, and B component is the subcomponent. The following is how B component passes parameters to A component:
To make To pass parameters from a child component to a parent component, you must first add a trigger event when the parent component introduces the child component, as follows:
In parent component A wxml:
<view style='padding:20px;border:2px solid red;'> <view style='text-align:center;'>我是组件A</view> <view> <view>A组件内容:</view> <view>B组件传入参数:{{paramBtoA}}</view> <componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/> </view> </view>
Component({ behaviors: [], properties: { }, data: { }, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { onMyEvent:function(e){ this.setData({ paramBtoA: e.detail.paramBtoA }) } } })
onMyEvent is the function when triggered by the child component
In sub-component B, wxml:<view style='border:2px solid gray;'> <view style='text-align:center;'>我是组件B</view> <view>A中传入的参数:{{paramAtoB}}</view> <button bindtap='change'>向A中传入参数</button> </view>
As soon as the button click event is triggered, parameters can be passed into parent component A. In sub-component 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 is the event that is executed after the button is clicked, triggers the myevent event, and passes in the parameter paramBtoA into the parent component
Sort by time
Loading...Show more comments
The above is the detailed content of Value transfer method between components in mini program development (code example). For more information, please follow other related articles on the PHP Chinese website!