vue插槽用法

vue中插槽主要是用于父组件传递给子组件HTML模板

默认插槽

父组件：

<template>
    <div>
       <child>
           <div>父到子的插槽</div>
       </child>
    </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  }

}
</script>

子组件：

<template>
    <div>
       我是子组件
       <slot></slot>
    </div>
</template>

固定插槽

父组件：

<template>
    <div>
       <child>
           <template slot="header">
               <div>父到子的插槽-头部</div>
           </template>
             <template slot="footer">
               <div>父到子的插槽-底部</div>
           </template>
       </child>
    </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  }

}
</script>

子组件：

<template>
    <div>
       <slot name="header"></slot>
       我是子组件
       <slot name="footer"></slot>
    </div>
</template>

<script>
export default {

}
</script>

插槽传参

子组件传给插槽参数

父组件：

<template>
    <div>
       <child>
           <div slot-scope="{data}">{{data.name}}</div>
       </child>
    </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  }

}
</script>

其中slot-scope中的data在从子组件中传过来的

子组件：

<template>
    <div>
       <slot :data="obj"></slot>
    </div>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        name: '子组件过来的名称'
      }
    }
  }
}
</script>