Foreword: The component is placed in the components folder, the page is placed in the pages folder, and the
event callback function is stored in the same level of data when the event callback function is stored in the page.js file! ! !
When the event callback function is stored in the component.js file, it must exist in the methods! ! !
Don't confuse
Explain with an example
First introduce the custom component, and later will involve the parent and child components to pass parameters
Effect picture:
Component use
First, create a new folder in a file within the file components, such as Tab, used to extract a common header, Tab may be the same as the view tab page use, that <Tabs></Tabs>
requirement:
subcomponents: wxml need to write the content displayed in the parent assembly
page: in json Introduce subcomponents first, and then use tags to present subcomponents
The specific operations are as follows:
First write some content in Tab.wxml
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
</view>
Tab.js file, first simulate subcomponents to simulate data and operate
Component({
data: {
tabs: [
{
id: 0,
name: "首页",
isActive: true
},
{
id: 1,
name: "原创",
isActive: false
}
,
{
id: 2,
name: "分类",
isActive: false
}
,
{
id: 3,
name: "关于",
isActive: false
}
]
},
methods: {
hanldeItemTap(e) {
/*
1 绑定点击事件 需要在methods中绑定
2 获取被点击的索引
3 获取原数组
4 对数组循环
1 给每一个循环性 选中属性 改为 false
2 给当前的索引的 项 添加激活选中效果就可以
*/
// 2 获取索引，解构赋值
const { index } = e.currentTarget.dataset;
// 3 获取data中的数组
// 最严谨的做法：重新拷贝一份数组，再对这个数组的备份进行处理，
let tabs=JSON.parse(JSON.stringify(this.data.tabs));
// 4 循环数组
// [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
}
}
})
It is very simple
to use Tabs custom components on the page. You need to add the following to the json file in the page folder to record the component
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}
wxml
<Tabs></Tabs>
wcss
.tabs_title{
display: flex;
padding: 10rpx 0;
}
.title_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color:red;
border-bottom: 5rpx solid currentColor;
}
Does it look very simple?
But what about passing on?
Component parameter
Now we start to do component pass-through!
The details are as follows: the
page passes parameters to subcomponents through tag attributes, subcomponents receive through properties, and subcomponents pass parameters to the page through triggering events
Page (parent) :
-
Transfer data to child components: In the label of the child component (this label is in the parent component), for example
tabs="{{tabs}}", the tabs data defined in the page is passed through the tabs attribute. -
Receive subcomponent data: Add a custom event to the subcomponent label (this label is Tabs in the parent component), pay attention to the corresponding relationship to receive the data, you can use the following figure to illustrate
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
</Tabs>
When receiving the data passed by the child component, pay attention to the method name of the parent component when the child component passes, that is to say, if the child component uses itemChange to pass, then the parent component needs to use binditemChange to bind the parent component receive.
Child component :
3. Receive data from the parent: There is a property under the child component, which can be used directly as the data in the data, which stores the data received from the parent component, as follows
properties: {
tabs:{
type:Array,
value:[]
}
}
- Pass data to the parent: bind the data to be passed through a custom event (such as the current index index), the operation is as follows
//this.triggerEvent("父组件自定义事件的名称",要传递的参数)
this.triggerEvent("itemChange",{index});
Code
Parent component js file
Page({
data: {
tabs: [
{
id: 0,
name: "首页",
isActive: true
},
{
id: 1,
name: "原创",
isActive: false
}
,
{
id: 2,
name: "分类",
isActive: false
}
,
{
id: 3,
name: "关于",
isActive: false
}
]
},
// 自定义事件 用来接收子组件传递的数据的
handleItemChange(e) {
// 接收传递过来的参数
const { index } = e.detail;
let { tabs } = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
}
})
Parent component wxml
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
</Tabs>
Subcomponent wxml
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
</view>
Subcomponent js
// components/Tabs.js
Component({
properties: {
tabs:{
type:Array,
value:[]
}
},
data: {
},
methods: {
hanldeItemTap(e){
const {index}=e.currentTarget.dataset;
// 5 触发父组件中的自定义事件 同时传递数据给
this.triggerEvent("itemsChange",{index});
}
}
})
At this point, we have completed the use of custom components and pass parameters
Sum up the content! !
If the parent component wants to use a child component, first introduce it in json, and then use the child component tag <child component name> </ child component name> in the page
The parent component passes the parameters to the child component through the child tag in its own page, and the method of binding and receiving through the method name passed by the child component
The child component passes the parameter to the parent component through the binding method, and receives it through the properties.
Another point is that if the element of the parent component written in the label content of the child component is displayed, then the slot is used
slot
The slot label is actually a placeholder slot, written in the child component to receive the parent component passed through the label.
When the parent component calls the child component, then pass the label over. Finally these passed labels will replace the slot Slot location
Subcomponent wxml, add a slot
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>
The parent component wxml, block is the content to be passed to the child component, it will replace the slot
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<block wx:if="{{tabs[0].isActive}}">0 </block>
<block wx:elif="{{tabs[1].isActive}}">1 </block>
<block wx:elif="{{tabs[2].isActive}}">2 </block>
<block wx:else>3</block>
</Tabs>
So far, complete the small case! You should try it too!
