修改自定义的组件中的数据为动态
具体要引用的wxml中传给自定义控件要显示的内容 , 这个过程叫父向子传递数据
自定义控件选中的item的index回传给引用的文件 , 这个过程叫子向父传递数据
一、父向子传递数据
父组件(页面)向子组件传递数据,通过标签属性的方式来传递
1. 在子组件上进行接收
2. 把这个数据当成是data中的数据直接用即可
自定义组件父像子传递数据
写一个简单的父向子传递数据的Demo
要引用自定义控件.wxml
<Tabs aaa={{a123a}}></Tabs>
自定义控件.js
/**
* 里边存放的是要从父组件中接收的数据
* 组件的属性列表
*/
properties: {
//要接受的数据的名称
aaa:{
//type 要接收的数据的类型
type:String,
//value 默认值
value:""
}
},
自定义控件.wxml
<view>{{aaa}}</view>
引用自定义控件文件显示出的效果
tabs自定义控件父向子传递数据(传递tabs要显示的list数据)
- 之前写在tabs.js中的list需要放在父控件中 , 由父控件传入到自定义控件中
要引用自定义控件.js
data: {
tabs: [
{
id: 0,
name: '首页',
isActive: true
},
{
id: 1,
name: '原创',
isActive: false
},
{
id: 2,
name: '分类',
isActive: false
},
{
id: 3,
name: '关于',
isActive: false
}
]
},
要引用自定义控件.wxml
<Tabs tabs="{{tabs}}"> </Tabs>
自定义控件.js
/**
* 里边存放的是要从父组件中接收的数据
* 组件的属性列表
*/
properties: {
// //要接受的数据的名称
// aaa:{
// //type 要接收的数据的类型
// type:String,
// //value 默认值
// value:""
// },
tabs: {
type: Array,
value: []
}
},
二、子向父传递数据
- 子向父传递数据,通过事件的方式传递
1. 在子组件的标签上加入一个自定义事件 - 点击事件触发的时候
1. 触发父组件中的自定义事件,同时传递数据给父控件
2. this.triggerEvent("父组件自定义事件的名称",要传递的参数)
要引用自定义控件.wxml
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"> </Tabs>
自定义控件.js
methods: {
//绑定点击事件,需要再methods中绑定
handleItemTap(e) {
/**
1. 绑定点击事件,需要再methods中绑定
2. 获取被点击的索引
3. 获取原数组
4. 对数组循环
1. 给每一个循环性,选中属性改为false
2. 给当前的索引项选中属性给true
5. 点击事件触发的时候
触发父组件中的自定义事件,同时传递数据给父控件
this.triggerEvent("父组件自定义事件的名称",要传递的参数)
*/
console.log("点击咯!");
console.log(e);
//2. 获取被点击的索引
const { index } = e.currentTarget.dataset;//{index} 是es6中的解构赋值
//3. 获取data中的数组
//解构 对复杂类型进行解构的时候,复制了一份变量的引用而已
//最严谨的做法 重新拷贝一份数组,再对这个数组的北方进行处理 : let tabs = JSON.parse(JSON.stringify(this.data.tabs));
//不要直接修改this.data.数据
// let { tabs } = this.data;//相当于 let tabs = this.data.tabs;
//4. 对数组循环(给每一个循环性,选中属性改为false;给当前的索引项选中属性给true)
//[].forEach遍历数组 遍历数组的时候修改了v 也会导致原数组被修改
// tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// this.setData({
// tabs
// })
//5. 触发父组件中的自定义事件
this.triggerEvent("itemChange",{index});
}
}
要引用自定义控件.js
//自定义事件,用来接收子组件传递的数据的
handleItemChange(e) {
console.log(e);
//接收传递过来的参数
const index = e.detail.index;
let {tabs} = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
},
三、tab选项卡中content内容的显示
slot标签 其实就是一个占位符 插槽 , 等到父组件调用子组件的时候再传递标签过来,最终这些被传递的标签就会替换slot插槽的位置
自定义控件.wxml
<view class="tabs_content">
<!--
slot标签 其实就是一个占位符 插槽
等到父组件调用子组件的时候再传递标签过来,最终这些被传递的标签就会替换slot插槽的位置
-->
<slot ></slot>
</view>
要引用自定义控件.wxml
<!--
1. 父组件(页面)向子组件传递数据,通过标签属性的方式来传递
1. 在子组件上进行接收
2. 把这个数据当成是data中的数据直接用即可
2. 子向父传递数据,通过事件的方式传递
1. 在子组件的标签上加入一个自定义事件
-->
<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>
