这是父亲给子传数据的代码——————————————— 

1.父组件要写的代码

目录

这是父亲给子传数据的代码——————————————— 

这是子组件给父组件传数据的代码———（这是一个事件为例)—

接下来这些是slot  和  block的使用方法————————————

//这是父组件的代码<tabs tabs="{
   {tabs}}">
</tabs>//父组件的jsdata: {tabs:[{id:0,value:'综合',isActive:true},{id:1,value:'销量',isActive:false},{id:2,value:'价格',isActive:false},]}

2.子组件要写的代码

 1.子组件接收数据

  properties: {

// 存放父元素接收的数据

    tabs:{

      type:Array,//类型

      value:[]//默认值

    }

  },

2.子组件的wxml  把接收的数据渲染出来

<view 

    wx:for="{ {tabs}}" 

    wx:key="id"

    class="item { {item.isActive? 'active':''}}"

    bindtap="handleitem"

    data-index='{ {index}}'

    >

    { {item.value}}

    </view>

这是子组件给父组件传数据的代码———（这是一个事件为例)—

 1.这是子组件的wxml文件

<view bindtap="handleitem" >{
   {item.value}}
</view>//上面这是重点//下面这个是为了让你知道里面是有循环的数据的<view wx:for="{
   {tabs}}" wx:key="id"class="item {
   {item.isActive? 'active':''}}"bindtap="handleitem"data-index='{
   {index}}'>{
   {item.value}}</view>

 2.这是子组件的js文件

methods: {handleitem(e){// console.log(e)// 获取点击中的索引const {index} = e.currentTarget.dataset;// console.log(index)// 触发父组件的事件  自定义this.triggerEvent('tabfuzujian',{index})}}

3.父组件要监听子组件传来的参数的变化  这是wxml文件

 <!-- bindtabfuzujian = "tabfuzujian"   监听子组件传递过来的参数 --><tabs tabs="{
   {tabs}}"bindtabfuzujian = "tabfuzujian"></tabs>

4.父组件的js文件

  tabfuzujian(e){const {index} = e.detailconsole.log(index)}//上面这是重点，上面的是父组件  拿到 子组件 的参数了//下面这是我绑定的事件，我拿到子传来的参数，我要干的事情
//写这个是为了让读者清晰 {我只是为了拿到的index  根据index改父亲组件里面的某个值}tabfuzujian(e){// 拿到子组件传递过来的索引// console.log(e.detail)const {index} = e.detail// 对原来的数组进行改变// 获取到data里面的元数据let {tabs} = this.data;tabs.forEach((v,i)=>i===index? v.isActive=true:v.isActive=false)this.setData({tabs})}

接下来这些是slot  和  block的使用方法————————————

1.在子组件里面输入slot  标签

  <!-- 内容 --><view><slot></slot></view>//上面重要//下面是我个人运用代码的场景  可以看下<view ><!-- 标题 --><view class="box"><view wx:for="{
   {tabs}}" wx:key="id"class="item {
   {item.isActive? 'active':''}}"bindtap="handleitem"data-index='{
   {index}}'>{
   {item.value}}</view></view><!-- 内容 --><view><slot></slot></view></view>

2.在父组件使用block标签     <block wx:if="{ {tabs[0].isActive}}">0</block>

//这是我代码中实际使用的场景<view><searchinput></searchinput><!-- bindtabfuzujian = "tabfuzujian"   监听子组件传递过来的参数 --><tabs tabs="{
   {tabs}}"bindtabfuzujian = "tabfuzujian"></tabs>//当 数据 isActive 为true时 内容显示相对应的   0   1   2   内容 谁为true  显示谁<block wx:if="{
   {tabs[0].isActive}}">0</block><block wx:elif="{
   {tabs[1].isActive}}">1</block><block wx:elif="{
   {tabs[2].isActive}}">2</block>
</view>