WeChat AppletMini Program DevelopmentValue transfer method between components in mini program development (code example)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
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></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>
<view>我是组件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:
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>
<view>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button>向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></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>
<view>我是组件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>我是组件A</view> A组件内容： B组件传入参数：{{paramBtoA}}
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>
<view>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button>向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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Notepad++7.3.1
Easy-to-use and free code editor
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
