微信小程序-自定义组件
十年河东，十年河西，莫欺少年穷
学无止境，精益求精
1、首先我们创建一个基本的小晨旭组件【/Components/Tabs/Tabs】，如下
Tabs.js
// pages/Components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { tabs: [{ id: 0, name: "首页", isactive: true }, { id: 1, name: "原创", isactive: false }, { id: 2, name: "分类", isactive: false }, { id: 3, name: "关于", isactive: false } ] }, /** * 组件的方法列表 */ methods: { tabitemchange: function (e) { const { index } = e.currentTarget.dataset; let list = this.data.tabs; list.forEach((v, i) => { console.log(v); console.log(i); i == index ? v.isactive = true : v.isactive = false; }); this.setData({ tabs: list }); } } })
Tabs.wxss
/* pages/Components/Tabs/Tabs.wxss */ .tabs{ } .tabs_title{ display: flex; padding:10rpx; } .tabs_item{ flex: 1; display: flex; justify-content: center; align-items: center; } .active{ color:red; border-bottom:4rpx solid red; } .tabs_content{}
Tabs.wxml ，注：tabitemchange 点击方法传参为：data-index 及 wx:for 中 item 的索引
<view class="tabs"> <view class="tabs_title"> <view class="tabs_item {{item.isactive?'active':''}}" wx:for="{{tabs}}" wx:key="id" bindtap="tabitemchange" data-index="{{index}}" wx:for-index="index" wx:for-item="item" > {{item.name}} </view> <!-- <view class="tabs_item active" bindtap="tabitemchange">首页</view> <view class="tabs_item">原创</view> <view class="tabs_item">分类</view> <view class="tabs_item">关于</view> --> </view> <view class="tabs_content">内容</view> </view>
在page页面中，引用该组件，如下
demo17.json
{ "usingComponents": {"Tabs":"../Components/Tabs/Tabs"} }
demo17.wxml
<Tabs> </Tabs>
这样，demo17的页面展示如下
以上我们就简单构建了一个组件。
在上述构造中，父组件为页面demo17.wxml ,子组件为tabs.wxml，那么组件之间怎么进行传值呢？
父向子传值
首先演示下父向子传值的简易demo，如下
在父组件中，自定义一个属性叫：fatherData
<!--pages/demo17/demo17.wxml--> <Tabs fatherData="请叫我爸爸"> </Tabs>
在子组件的属性中，创建 对象fatherData ，并声明 Type 属性为字符串，value 默认为空值
// pages/Components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: { fatherData:{ type:String, value:"" } },
最后，在Tabs.wxml中添加如下代码
<view> 我接受到的值为：{{fatherData}} </view>
保存，并查看效果
这样，父传子就简单的完成了。
现在，我们传递变量给子组件，在demo17.js 中创建tabs数组如下：
// pages/demo17/demo17.js Page({ /** * 页面的初始数据 */ data: { tabs: [{ id: 0, name: "首页", isactive: true }, { id: 1, name: "原创", isactive: false }, { id: 2, name: "分类", isactive: false }, { id: 3, name: "关于", isactive: false } ] }, })
然后在demo17.wxml 中修改如下：
<!--pages/demo17/demo17.wxml--> <Tabs tabs="{{tabs}}"> </Tabs>
最后，在子组件Tab.js中申明要接收的tabs的类型及默认值
// pages/Components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: { tabs:{ type:Array, value:[] } },
此时保存，并查看页面效果，和之前一样
但是，此时，子组件的tabitemchange 点击事件就有问题了，如下：
// pages/Components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: { tabs:{ type:Array, value:[] } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { tabitemchange: function (e) { const { index } = e.currentTarget.dataset; let list = this.data.tabs; list.forEach((v, i) => { console.log(v); console.log(i); i == index ? v.isactive = true : v.isactive = false; }); this.setData({ tabs: list }); } } })
此时，子组件的data 中并没有tabs 变量，因此 this.setData({}) 不生效，也不报错。
现在，tabs 变量是父组件传递过来的，那么，我们真正要修改的是父组件的tabs变量，这时，就需要子向父传值了，可参考：https://www.bilibili.com/video/BV1nE41117BQ?p=40
子向父传值
子向父传值时，需要使用 this.triggerEvent("itemChange",index); 绑定一个触发事件，并传递 index 变量
因此，在tabs.js 中 我们修改如下：
// pages/Components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: { tabs:{ type:Array, value:[] } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { tabitemchange: function (e) { const index= e.currentTarget.dataset.index; this.triggerEvent("itemChange",index); } } })
在父组件中，我们接受这个触发事件，如下：
<!--pages/demo17/demo17.wxml--> <Tabs tabs="{{tabs}}" binditemChange="itemChange"> </Tabs>
在父组件中，定义itemChange方法
// pages/demo17/demo17.js Page({ /** * 页面的初始数据 */ data: { tabs: [{ id: 0, name: "首页", isactive: true }, { id: 1, name: "原创", isactive: false }, { id: 2, name: "分类", isactive: false }, { id: 3, name: "关于", isactive: false } ] }, itemChange:function(e){ console.log(e) const index= e.detail; //传递过来的值 一般都放在 e.detail 中 let list = this.data.tabs; list.forEach((v, i) => { i == index ? v.isactive = true : v.isactive = false; }); this.setData({ tabs: list }); } })
这样，父组件就可以根据自个的需求，进行导航条的定义了。
最后，我们根据条目的切换，显示的内容变成动态的，这时，我们需要使用一个标签，插槽
插槽---Slot
首先在子组件中，内容部分，用插槽替代，如下
<view class="tabs_content"> <slot></slot> </view>
在父组件中，填充插槽
<!--pages/demo17/demo17.wxml--> <Tabs tabs="{{tabs}}" binditemChange="itemChange"> <view> 我要替代插槽 </view> </Tabs>
效果如下
最后，我们将我要替代插槽改成变量，即可完成内容的动态化
<!--pages/demo17/demo17.wxml--> <Tabs tabs="{{tabs}}" binditemChange="itemChange"> <block wx:if="{{tabs[0].isactive}}">首页被选中</block> <block wx:elif="{{tabs[1].isactive}}">原创被选中</block> <block wx:elif="{{tabs[2].isactive}}">分类被选中</block> <block wx:else="{{tabs[3].isactive}}">关于被选中</block> </Tabs>
效果
@天才卧龙的博客
