Vue组件之--slot内容分发

最新推荐文章于 2024-07-26 13:02:41 发布

初心鸿鹄

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量847

点赞数

分类专栏： Vue-51CTO 文章标签： Vue slot 内容分发

本文链接：https://blog.csdn.net/codesway/article/details/79629427

版权

本文探讨了Vue组件中如何利用slot进行内容分发，解决在组件内获取和展示外部内容的问题。介绍了单一slot和作用域插槽的用法，帮助开发者更好地理解和运用这一特性。

摘要由CSDN通过智能技术生成

以前，Vue组件总是一个个的空标签的形式出现的，那么如果说组件标签里面有内容，那么要获取这些内容要怎么办呢？

Vue提供了一个解决方案：slot内容分发，其作用就是用来获取组件中的原内容（就是组件标签内部的内容）。

用法分为两种情况:当组件内的原内容结构比较简单的时候可以使用单一slot，当原内容结构比较复杂的时候使用具名slot；

单一slot：在组件模板合适的位置插入slot组件即可；

 <div id="container" v-cloak>
     <my-compo>你好，2018！</my-compo>
     <!-- 在这里组件的原内容是：你好，2018 ，比较简单-->
 </div>
 <!-- 在组件模板中获原内容 -->
  <template id="myCompon">
     <div class="content">
         <h3>{
  {house.price}}</h3>
         <slot>没有原内容</slot>
         <!-- 当没有原内容的时候就会显示“没有原内容”，有的话就会被替换成原内容 -->
     </div>
 </template>

具名slot：