父组件
<template>
<div>
<h3>这里是父组件</h3>
<ceshitab :lists='lists'> <!-- lists将列表传递到子组件-->
<div slot="ceshi" slot-scope="item"> <!-- item获取子组件传回的当前项 -->
<div v-if='item.val.id =="one"' style="color:red">{{ item.val.name }}</div> <!-- 对子组件循环的每项数据进行不用样式的定义 -->
<div v-else-if='item.val.id =="foure"' style="color:blue">{{ item.val.name }}</div>
<div v-else>
{{ item.val.name }} -- 其它
</div>
</div>
<div slot="boy">这是男性频道</div>
<div>这是默认插槽</div>
</ceshitab>
</div>
</template>
<script>
import ceshitab from './ceshitab'
export default {
data () {
return {
lists: [
{id: 'one', name: '张三'},
{id: 'two', name: '李四'},
{id: 'three', name: '王二'},
{id: 'foure', name: '麻子'}
]
}
},
components: {
ceshitab
}
}
</script>
子组件
<template>
<div>
<h3>{{ titles }}</h3>
<ul>
<li v-for="list in lists"> <!-- 通过props获取父组件传递的参数 -->
<slot name='ceshi' :val="list"></slot> <!-- :val 将当前项传回父组件 -->
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'ceshitab',
props: ['lists'],
data () {
return {
titles: '这是子组件'
}
}
}
</script>
vue slot