纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

yh8899abc   2021-05-23 我要评论
想了解vue具名插槽的基本使用实例的相关内容吗,yh8899abc在本文为您仔细讲解vue具名插槽的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue具名插槽用法,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>

总结


相关文章

猜您喜欢

  • Ajax请求超时 Ajax请求超时与网络异常处理图文详解

    想了解Ajax请求超时与网络异常处理图文详解的相关内容吗,追逐那颗星在本文为您仔细讲解Ajax请求超时的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:ajax请求超时设置,ajax请求超时处理,ajax请求超时怎么处理,下面大家一起来学习吧。..
  • java类加载 java类加载相关知识总结

    想了解java类加载相关知识总结的相关内容吗,code_greenhand在本文为您仔细讲解java类加载的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java类加载器,java类加载机制,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.moon-script.com 【月光下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式