如何在vue中使用具名插槽

今天就跟大家聊聊有关如何在vue中使用具名插槽，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

具有名字的插槽slot使用 中的 "name" 属性绑定元素

注意：

1，如果没有匹配到 则放到匿名的插槽中

2，具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序

vue的匿名插槽（默认插槽）

父组件

<div> <myslot>我是刚刚</myslot></div>

子组件

<div> <slot><slot></div>

vue的具名插槽

父组件

<div> <myslot>  <template #one>猪猪是一只大肥猫</template>  <template #two>通通是一个大屁眼子</template>  <template #three>咪咪是没心没肺的小混蛋</template>  我是刚刚 </myslot></div>

子组件

<div> <slot name="one"></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot></div>

渲染出来（大致顺序）即为

vue的作用域插槽

大白话解释作用域插槽：父组件可以通过插槽读到子组件对应插槽所带的数据
父组件

<div><myslot><template #oneData="oneData"><div>{{oneData.one.message}}</div></template><template #two>通通是一个大屁眼子</template><template #three>咪咪是没心没肺的小混蛋</template>我是刚刚</myslot></div>

子组件

<div> <slot name="one" :data='one'></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot></div><script> export default {  data() {   return {    one: {     message: '这是子组件所带的数据message',       },   };  }, }</script>

代码优化

<div> <myslot>  <template #oneData="{oneData}">   <div>{{oneData.message}}</div>  </template>  <template #two>通通是一个大屁眼子</template>  <template #three>咪咪是没心没肺的小混蛋</template>  我是刚刚 </myslot></div>

子组件

<div> <slot name="one" :oneData='one'></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot></div><script> export default {  data() {   return {    one: {     message: '这是子组件所带的数据message',       },   };  }, }</script>

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

看完上述内容，你们对如何在vue中使用具名插槽有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。