場景 color header head fff back 不同 傳遞 nbsp

slot插槽的使用場景

父組件向子組件傳遞dom時會用到插槽 作用域插槽：當同一個子組件想要在不同的父組件裏展示不同的狀態，可以使用作用域插槽。展示的狀態由父組件來決定 註：想要修改父組件向子組件傳遞的元素的樣式時，只能在對應的子組件進行修改 1.具名插槽的使用 父組件 <template slot="header"> <p>我是頭部</p> </template> 子組件 <slot name="header"></slot> 2.作用域插槽的使用1 父組件 <template slot-scope="props"> <li>{{props.content}}</li> </template> 子組件 <ul> <slot v-for="item of list" :content=item></slot> </ul> <script> export default { data(){ return { list:[‘zhangsan‘,‘lisi‘,‘wangwu‘] } } } </script> 3.作用域插槽的使用2 父組件 <template slot-scope="props"> <tr> <td>{{props.item.name}}</td> <td>{{props.item.age}}</td> </tr> </template> 子組件 <table> <tr> <th>姓名</th> <th>年齡</th> </tr> <slot v-for="item of data" :item=item></slot> </table>
<script> export default { data(){ return { data:[{ name:‘張三‘, age:20 },{ name:‘李四‘, age:14 },{ name:‘王五‘, age:10 }] } } } </script>

2.作用域插槽的使用

vue slot插槽的使用