vue插槽

最新推荐文章于 2024-08-31 22:07:44 发布

打个盹儿啊

最新推荐文章于 2024-08-31 22:07:44 发布

阅读量53

点赞数

分类专栏： vue插槽文章标签： vue

本文链接：https://blog.csdn.net/BI1147615067/article/details/115655757

版权

vue插槽专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客深入探讨了Vue.js中的插槽机制，包括匿名插槽、具名插槽和作用域插槽的使用。通过示例展示了如何在父组件中传递内容和样式到子组件，以及如何在子组件中接收和显示这些内容。理解插槽对于提升Vue组件间的交互和复用性至关重要。

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

slot插槽：是子组件里面的一块HTML模板，这块模板的显示与不显示，以及要怎样显示由父组件决定。
分为三种插槽：
匿名插槽：父组件传入样式以及内容，子组件负责展示
具名插槽：具名插槽可以在子组件出现好多次，在不同位置，对应父组件进行调用相同名字的插槽。
作用域插槽：用的父组件模板，子组件数据。拿到子组件数据是以对象的方式拿到。

//匿名插槽
index.vue  父组件
<slot2 :data="" color="" >
      <ul>
          <li>1</li>
          <li>2</li>
      </ul>
      <ul slot>
          <li>1</li>
          <li>2</li>
      </ul>
</slot2>

slot2.vue   子组件
<!--匿名插槽-->
<slot></slot>

//具名插槽
index.vue  父组件
<slot2>
    <div slot="n1">
    	<h2>具名插槽n1</h2>
    </div>
    <!--具名插槽 传入父的值-->
    <div slot="n2">
    	<h2>具名插槽n2</h2>
        <ul>
            <li v-for="(v,i) in arr"  :key="i">{{v}}</li>
        </ul>
    </div>
</slot2>

slot2.vue   子组件
<!--具名插槽-->
<slot name="n1"></slot>
<slot name="n2"></slot>

//index.vue  父组件
<slot2>
    <div slot-scope="scope">  
		{{scope.title}}   
	</div>
</slot2>

slot2.vue   子组件
<!-- 作用域插槽 -->
<slot :title="title"></slot>

//子组件中传入数组
//index.vue  父组件  
<slot2>
    <div slot-scope="scope">
        <ul>
        	<li v-for="(v,i) in scope.arr" :key="i">{{v}}</li>  //scope.arr是子组件的数据
        </ul>
    </div>
</slot2>

//slot2.vue   子组件
<slot :arr="arr"></slot>
data(){
    return{
      arr:[6,7,8,9,0]
    }
}