Home >WeChat Applet >Mini Program Development >Value transfer method between components in mini program development (code example)
Value transfer method between components in mini program development (code example)
- 不言forward
- 2018-12-15 09:52:339761browse
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
2.Introduce the component
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
Declaration: A component is the parent component, and B component is the child component, as follows Component A passes parameters to component B:
Introduce component B into component AWrite 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
Statement: A component is the parent component, and B component As a sub-component, the following is how B component passes parameters to A 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
李三宗
posted on
Posted 2 days ago
【Small program development】Passing values between components
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>
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
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
3. Parent component passes parameters to child component
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"
}
}
Write in the wxml of A component:
<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>
myevent is the bound trigger event
In the parent component A, js: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
-
report
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!
Related articles
See more- What do you need to learn to develop WeChat mini programs?
- Summary of WeChat Mini Program Development Technology
- Detailed explanation of city selector city switching in WeChat applet development
- WeChat applet development implements tab (TabBar at the top of the window) page switching
- CnClock desktop clock-Winform applet development
- TODO: Experiencer of the mini program development process