vue slot插槽的使用

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.作用域插槽的使用