slot怎么在vue项目中使用-创新互联

slot怎么在vue项目中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联公司始终坚持【策划先行，效果至上】的经营理念，通过多达10余年累计超上千家客户的网站建设总结了一套系统有效的全网营销推广解决方案，现已广泛运用于各行各业的客户，其中包括：成都橡塑保温等企业，备受客户赞誉。

什么是插槽？

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

Vue slot 原理

在web-components中有slot的概念，https://developers.google.com/web/fundamentals/web-components/shadowdom。

元素

Shadow DOM 使用元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符，用户可以使用自己的标记来填充。

通过定义一个或多个 slot，您可将外部标记引入到组件的 shadow DOM 中进行渲染。这相当于您在说“在此处渲染用户的标记”。

注：Slot 是为网络组件创建“声明性 API”的一种方法。它们混入到用户的 DOM 中，帮助对整个组件进行渲染，从而将不同的 DOM 树组合在一起。

怎么用插槽？

默认插槽

父组件

在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用）

子组件(slotOne1)

在子组件中写入slot，slot所在的位置就是父组件要显示的内容

slot怎么在vue项目中使用

当然再父组件引用的子组件中也可以写入其他组件

父组件

子组件(slotOne2)

slot怎么在vue项目中使用

具名插槽

子组件

在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer

父组件


  我是name为footer的slot

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置（当然也不用必须写到template），没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

slot怎么在vue项目中使用

插槽的默认内容

父组件

子组件

可以在子组件的slot标签中写入内容，当父组件没有写入内容时会显示子组件的默认内容，当父组件写入内容时，会替换子组件的默认内容

slot怎么在vue项目中使用

编译作用域

父组件

子组件

slot怎么在vue项目中使用

作用域插槽

子组件

在子组件的slot标签上绑定需要的值

父组件

在父组件上使用slot-scope属性，user.data就是子组件传过来的值

slot怎么在vue项目中使用

看完上述内容，你们掌握slot怎么在vue项目中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享文章：slot怎么在vue项目中使用-创新互联
标题链接：http://hbruida.cn/article/dgegep.html