slot的使用

普通插槽

在嵌入的组件标签中加入内容，如果子组件中有slot就显示，否则就是不显示
父组件

<h1>Hello 父组件</h1> <Child><p>这是一些初始内容</p><p>这是更多的初始内容</p> </Child>

子组件

<h1>Hello World</h1> <slot></slot>

如果不加入slot里的内容就不会显示Child里面的内容

具名插槽

用来筛选插槽里的template内容），在子组件通过name来选定指定内容

父组件

<h1>Hello组件</h1><Child><template slot="header"><p>我是name为header的slot</p></template><template slot="footer"><h1>我是name为footer的slot</h1></template></Child>

子组件

<h1>Hello World</h1><slot name='header'></slot><slot name='footer'></slot>

作用域传参

拿到子组件里data的值
父组件

我是作用域插槽
父组件

<Child><template slot-scope="user"><div v-for="item in user.data" :key="item.id">{{item}}</div></template></Child>

子组件

<template><div>我是作用域插槽的子组件<slot :data="user"></slot></div> </template><script> export default {name: 'slotthree',data () {return {user: [{name: 'Jack', sex: 'boy'},{name: 'Jone', sex: 'girl'},{name: 'Tom', sex: 'boy'}]}} } </script> 创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的slot的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。