我自定义了一个新闻列表的组件，以下是部分代码
// 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>
父组件如何从子组件获取到传值，然后进行绑定？
作用域卡槽 然后解构卡槽
<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