收藏
回答

小程序组件插槽 slot 传值问题?

我自定义了一个新闻列表的组件,以下是部分代码

// component/news.js
Component({
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: []
    },
    showAuthor: {
      type: Boolean,
      value: true
    },
    showTime: {
      type: Boolean,
      value: false
    },
    showRead: {
      type: Boolean,
      value: false
    },
    showRank: {
      type: Boolean,
      value: false
    }
  },


  /**
   * 组件的初始数据
   */
  data: {
    message'这是一个新闻组件'
  },


  /**
   * 组件的方法列表
   */
  methods: {
    handleClick($event) {
      this.triggerEvent('click', $event.currentTarget.dataset.id);
    }
  }
})


组件的wxml

<!--component/news.wxml-->
<view class="news">
  <view
    data-id="{{i.id}}"
    class="news-item flex"
    bindtap="handleClick"
    wx:for="{{list}}"
    wx:key="item"
    wx:for-item="i">
    <view class="news-bd">
      <view class="news-info">
        <view class="title">{{i.title}}</view>
        <view class="metadata">
                   <!-- 这里 -->
          <slot name="author"></slot>
                    <slot name="time"></slot>
                    <slot name="read"></slot>
        </view>
      </view>
    </view>
    <view class="news-ft">
      <view class="thumb">
        <image mode="aspectFit" src="{{i.src}}"></image>
      </view>
    </view>
  </view>
</view>


组件调用

<news-list list="{{news_list}}">
  <view slot="author">{{}}</view>
</news-list>

<news-list list="{{news_list}}">
  <view slot="time">{{}}</view>
  <view slot="read">{{}}</view>
</news-list>


父组件如何从子组件获取到传值,然后进行绑定?

回答关注问题邀请回答
收藏

1 个回答

  • 泉州特产
    泉州特产
    2021-12-17

    作用域卡槽 然后解构卡槽

    <span>

    <slot name="test" v-bind:user="user">

    {{ user.lastName }}

    </slot>

    </span>


    <current-user v-slot:test="{ user }">

    {{ user.firstName }}

    </current-user>

    https://cn.vuejs.org/v2/guide/components-slots.html

    2021-12-17
    有用
    回复 2
    • 张广龙
      张广龙
      2022-02-16
      人家问的小程序,阁下贴个vue代码哪门子回答,搞的人家好一激动,以为小程序支持作用域插槽了。
      2022-02-16
      1
      回复
    • 逆天改命
      逆天改命
      2022-08-21回复张广龙
      我也挺激动,以为支持了呢
      2022-08-21
      回复
登录 后发表内容