2021-07-03父传递子，子传递父，选项激活自定义组件

<!-- 父组件传递子组件数据
子向父传递事件数据-->
<tabs tabs= "{{tabs}}" binditemChange="handleItemChange">   </tabs>

<!--components/tabs/tabs.wxml--><view class="tabs"><view class="tabs_title"><!-- <view class="title_item active" >首页</view><view class="title_item">原创</view><view class="title_item">分类</view><view class="title_item">关于</view>--><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">内容</view>
</view>

// pages/demo14/demo14.js
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){//console.log(e);const {index} = e.detail;let {tabs}=this.data;  tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false );this.setData({tabs})}
})

// components/tabs/tabs.js
Component({/*** 存放要从父组件接收的数据*/properties: {//aaa:{//  type: String,//  value: ""// }tabs:{type: Array,value:[]}},/*** 组件的初始数据*/data: {},/*** 存放事件回调函数（方法），与data同级*/methods: {hanldeItemTap(e){/*** 绑定点击事件* 获取被点击的索引* 获取原数组* 对数组循环 给每一个循环选中属性改为false 给当前的索引添加激活选项* 点击事件： 数据进行 子传父*/const {index}=e.currentTarget.dataset;this.triggerEvent("itemChange",{index});//对复杂类型进行结构的时候，复制了一份变量的引用而已//最严谨的做法，应该重新拷贝一份数组，对这个数组的克隆进行处理，不要直接修改原数组this.data.数据//严谨写法：let tabs=JSON.parse(JSON.stringify(this.data.tabs));//let {tabs}=this.data;   //=====let tabs = this.data.tabs;//循环数组//tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false );// this.setData({// tabs//})}}
})

2021-07-03父传递子，子传递父，选项激活自定义组件相关推荐

qt如何把父窗口的变量传给子窗口_父窗口和iframe子窗口之间相互传递参数和调用函数或方法...
1.父窗口向子窗口传递参数: 可以在url中添加参数:2.html?a=1&b=2&c=3 然后在子页面上可用js解析,提供一个函数: function getQueryStr(sAr ...
【Vue】—子级向父级传递数据
[Vue]-子级向父级传递数据 <template><div><h2>Son</h2><div v-for='(item,index) in da ...
父窗口与子窗口的数据传递问题
曾经有那么一道题目是关于父窗口与子窗口的数据传递问题.我当时只知道父窗口向子窗口传递数据.不知道子窗口怎么向父窗口传递数据.今天终于把这个问题解决了,呵呵,记录一下: 我权且把原始窗口叫父窗口,把从该 ...
Angular中父子组件之间父组件给子组件传值、传递方法、传递自己
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Vue2.x中的父组件数据传递至子组件
父组件结构 template <template><div><v-girl-group :girls="aGirls"></v-girl- ...
vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
VUE3 子传父父传子双向传递
组件参数传递父传子 father.vue <template > <!-- 父传子实现 2.向vue页面中的子组件传递该属性 :传给子组件的名字(自定义)="对应定义在父 ...
antd4.x版本解决父组件传递给子组件值的时候动态显示initialValue值的问题
antd4.x版本解决父组件传递给子组件值的时候动态显示initialValue值的问题例如,我要从父组件给子组件传递一个字符串,然后子组件显示出来,按照3.x的版本的写法无法更新显示,这是因为in ...
[.NET] 建构子中传递子对象的对象
在设计对象继承的时候,父对象建构子会需要一些参数,这些参数可以由子对象建构子透过base关键词来提供. namespace Test001 {public class ParentClass{// C ...
[react] 怎样将事件传递给子组件？
[react] 怎样将事件传递给子组件? 这道题出的有问题. 一般情况下我们父组件向子组件传递的不是事件,而是事件处理函数 const Parent = ({ lastName }) => {o ...

2021-07-03父传递子，子传递父，选项激活自定义组件

2021-07-03父传递子，子传递父，选项激活自定义组件相关推荐

最新文章

热门文章