您的位置：首页 > 编程学习 > > 正文

vue插槽的分类（vue具名插槽的基本使用实例）

更多时间：2022-03-29 10:58:58 类别：编程学习浏览量：917

vue插槽的分类

vue具名插槽的基本使用实例

前言

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

注意：

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

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

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

父组件

<li>
 <myslot>我是刚刚</myslot>
</li>

子组件

<li>
 <slot><slot>
</li>

vue的具名插槽

父组件

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

子组件

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

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

vue插槽的分类（vue具名插槽的基本使用实例）

vue的作用域插槽

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

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

子组件

<li>
 <slot name="one" :data='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</li>

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

代码优化

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

子组件

<li>
 <slot name="one" :oneData='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</li>

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

总结

到此这篇关于vue具名插槽基本使用的文章就介绍到这了,更多相关vue具名插槽内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！

标签：vue 具名插槽

上一篇：sqlserver2000显示无服务器（SQL SERVER 2000 9003错误的解决方法只适用于SQL2000）

下一篇：python中内存管理机制（Python中整数的缓存机制讲解）

您可能感兴趣

vue插槽的分类（vue具名插槽的基本使用实例）

vue插槽的分类

前言

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

vue的具名插槽

vue的作用域插槽

总结

热门推荐

排行榜