vue作用域插槽slot-scope详解_slot插槽和PCIE插槽「建议收藏」

1、具名插槽

有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。

//组件调用时start
<slot-demo>
 <template v-slot:header>
  //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
      <div>header-text</div>
  </template>
  <template v-slot:footer>
  //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
      <div>footer-text</div>
  </template>
</slot-demo>
//组件调用时end
//书写组件时start
<template>
    <div>
     	<div>
            <slot name='header' />
            //这里name的值就是这个插槽的名称, <div>header-text</div>会渲染到这
        </div>
        主体
        <div>
            <slot name='footer' />
            //这里name的值就是这个插槽的名称。<div>footer-text</div>会渲染到这
        </div>
    </div>
</template>
//书写组件时end

最后我们会在我们想要的位置将我们的元素放置。

2、作用域插槽

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

//组件调用start
 <ul>
   <slot-demo :userObj="userObj">
	   <template v-slot:footer="message">
	       <div>{ 
   { 
   message.userAge}}</div>
	       <div>{ 
   { 
   message.userName}}</div>
	       //这里用的message是写组件时在slot标签上定义属性的映射。
	   </template>
   </slot-demo>
 </ul>
 
   data() { 
   
	   return { 
   
		      userObj: { 
   
		          age: 3,
		          name: '张三',
		      },
	    }
  },
//组件调用end
 //书写组件时start
<template>
    <li>
    	//这里的userObj是组件调用是传下来的prop
        <slot name='footer' :userAge="userObj.age" :userName="userObj.name" >
        </slot>
    </li>
</template>


props: { 
   
   userObj: Object,
},

 //书写组件时end

注意事项：
这里需要注意的是message是所有你绑定属性的集合，也就是你写的：:userAge=“userObj.age” 会当做message的属性来实现。当然这里message可以换做其它的名称。

3、总结

v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

今天的文章vue作用域插槽slot-scope详解_slot插槽和PCIE插槽「建议收藏」分享到此就结束了，感谢您的阅读。