Page的wxml中如果直接获取component的数据?
发布于 5 年前 作者 xiaqiu 2322 次浏览 来自 官方Issues

Component组件:

mycomponent.js:

Component({
  properties: {
    tabTitls:{
      type:Array,
      value:[],
      observer:function(news,olds,path){
       //console.log(news,olds);
      }
    },
    tabListData:{
      type:Array,
      value:[]
    }
  },
  data: {
    tabIndex:0
  },
  methods: {
        /**
     * tab标题选中事件
     */
    onTabTitleSelected: function (e){
      var  index = e.currentTarget.dataset.index;
      this.setData({
        //拿到当前索引并动态改变
        tabIndex: index
      })
  
    },
        /**
     * swipe切换事件
     */
    pagechange:function(e){
      //console.log(e);
      let tabIndex = e.detail.current;
      this.setData({
        tabIndex: tabIndex
      })
    },
  }
})

mycomponent.wxml:

<view class="root-container" >
  <view class="tab-bar" >
    <text  wx:for="{{tabTitls}}" wx:key="index" class="{{tabIndex == index ? 'title active' : 'title '}}" style="width:{{100/tabTitls.length}}%;" data-index="{{index}}"  bindtap="onTabTitleSelected">{{item}}</text>
  </view>
  <swiper class="swiper-view" indicator-dots="{{false}}" autoplay="{{false}}" bindchange="pagechange" current="{{tabIndex}}">
    <swiper-item class="swiper" wx:for="{{tabTitls}}" wx:key="index" >
      <!-- page页面需要获取 index -->
      <slot> </slot>
    </swiper-item>
  </swiper>
</view>

Page页面:

testcomponent.js:

Page({
  data: {
    tabIndex:0,
    tabTitls:["待支付","已完成","已取消","全部"],
    tabListData:["1","2","3","4"]
  },
})

testcomponent.wxml:

<mycomponent class="mycomponent" tabTitls="{{tabTitls}}" tabListData="{{tabListData}}"> 
  <text>需要获取component的index:{{index}}</text>
</mycomponent>

请问:在page页面怎么获取component页面的index。

百度了很久,木有找到page直接获取component的数据,都是绑定事件去获取。

回到顶部