vue使用slot分发内容与react使用prop分发内容
vue
将 <slot>
元素作为承载分发内容的出口
// layout.vue
<div class="container"><main><slot></slot></main>
</div>
当组件渲染的时候,<slot></slot>
将会被替换该组件起始标签和结束标签之间的任何内容
// hone.vue
<div class="container"><layout><p>A paragraph for the main content.</p><p>And another one.</p></layout>
</div>
react
每个组件都可以获取到 props.children
。它包含组件的开始标签和结束标签之间的内容。
class Layout extends Component {render() {return (<div className="container"><main>{this.props.children}</main></div>);}
}
props
是 React 组件的输入。它们是从父组件向下传递给子组件的数据。
function Home (params) {return (<><Layout><p>A paragraph for the main content.</p><p>And another one.</p></Layout></>)
}
vue
有时我们需要多个插槽。对于这样的情况,<slot>
元素有一个特殊的特性:name
。这个特性可以用来定义额外的插槽:
<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>
一个不带 name 的 <slot>
出口会带有隐含的名字“default”
在向具名插槽提供内容的时候,我们可以在一个 <template>
元素上使用 v-slot
指令,并以 v-slot
的参数的形式提供其名称:
<layout><template v-slot:header><h1>Here might be a page title</h1></template><p>A paragraph for the main content.</p><p>And another one.</p><template v-slot:footer><p>Here's some contact info</p></template>
</layout>
现在 <template>
元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot
的 <template>
中的内容都会被视为默认插槽的内容。
react
注意:组件可以接受任意 props,包括基本数据类型,React 元素以及函数。
class Layout extends Component {render() {return (<div className="container"><header>{this.props.header}</header><main>{this.props.children}</main><footer>{this.props.footer}</footer></div>);}
}
少数情况下,你可能需要在一个组件中预留出几个“洞”。这种情况下,我们可以不使用 children
,而是自行约定:将所需内容传入 props
,并使用相应的 prop
。
function Home (params) {return (<><Layoutheader={<h1>Here might be a page title</h1>}footer={<p>Here's some contact info</p>} ><p>A paragraph for the main content.</p><p>And another one.</p></Layout></>)
}
React 元素本质就是对象(object),所以你可以把它们当作 props,像其他数据一样传递。这种方法类似Vue“槽”(slot
)的概念,但在 React 中没有“槽”这一概念的限制,你可以将任何东西作为 props
进行传递。
同样是组合代码,Vue和React发挥得淋漓尽致,你更喜欢哪种方式呢?欢迎在评论区留言,说说你们的看法!
完
vue使用slot分发内容与react使用prop分发内容相关推荐
- Vue 之 slot(插槽)
前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生&quo ...
- [vue]插槽slot
[vue2.x]插槽slot 主要是用于占位,并在占位的位置展示指定的内容 插槽分为具名插槽与默认插槽,根据使用情况选择对应的插槽 vue中<slot> 元素作为承载分发内容的出口 组件中 ...
- 一次性讲明白vue插槽slot
详解vue中的插槽slot 一.前言 二.插槽是什么 三.插槽的作用 三.插槽的分类 1.默认插槽 2.具名插槽 3.作用域插槽 以下文章来自掘金 作者:JH30K 链接:https://juejin ...
- Vue中slot的介绍与使用(通俗版)
什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.插槽显不显示.怎样显示是由父组件 ...
- vue插槽 - slot
vue插槽 - slot 前言 一.插槽内容 二.编译作用域 三. 后备内容 四. 具名插槽 五. 作用域插槽 1. 基本用法 2. 独占默认插槽的缩写语法 3. 解构插槽Prop 六. 动态插槽名 ...
- vue中slot(插槽)详解,slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
- vue 模板字符串循环_使用React四年后转而使用Vue,是一种什么样的体验?
全文共1825字,预计学习时长5分钟 图源:unsplash 过去四年来,笔者都是用React框架工作,最近开始使用Vue了.尽管两者有一些概念上的差异--Vue受到了Angular的影响,但在Rea ...
- Vue 中 slot插槽 的使用
Vue 中 slot插槽 的使用 插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
- vue 中slot 的具体用法
子组件 <template><div class="slotcontent"><ul><!--<slot></slot& ...
最新文章
- babel从入门到入门
- phpcms的安装以及简单使用
- 10g启动归档模式及报ORA-00265错处理
- hibernate增删改查的标准范例
- [云炬商业计划书阅读分享] 珠江啤酒公司企业文化调查
- mysql 执行计划不对_关于mysql主从查询执行计划不一致问题的分析
- c++ template(4)基本技巧
- 宁波中小学生计算机技术展示,2020年宁波市中小学生电脑制作活动创客竞赛暨2020年宁波市中小学生创客大赛顺利举行...
- 车辆跟驰模型matlab代码实现_MATLAB——考虑驾驶员特性及前车速度的快速路模型...
- pythonstdin_如何写入Python子进程'stdin?
- Android OpenGLES2.0(十六)——3D模型贴图及光照处理(obj+mtl)
- 【nginx】nginx 动静分离
- linux 编程头文件搜索规则
- alwayson高可用组_了解AlwaysOn可用性组上的备份-第1部分
- 0017-Spark的HistoryServer不能查看到所有历史作业分析
- php5中使用xslt扩展,.NET_解析在.net中使用XSLT转换xml文档的示例详解,XSL即可扩展的样式表文件。 可 - phpStudy...
- 语音识别软件测试面试,软件测试之ASR(语音识别)评测学习
- 数字图像处理(极简) 第一章 概述(docx)
- 毛星云opencv入门图像模糊blur代码
- 定制版商业计划书PPT模板
热门文章
- 华为云ModelArts 3.0助力行业AI高效落地
- Smalltalk 语言的地位为何一落千丈?
- 雷军:4G 手机已清仓,全力转 5G;QQ音乐播放中途插语音广告引热议;Wine 5.9 发布 | 极客头条...
- 工作5年后才明白:不起眼的技能中,藏着你的未来
- 刷爆了!BAT这场AI芯片之战,你更支持谁​?
- iPhone 11 引领芯片新革命?
- 鸿蒙将用于工业;三星新芯片支持 5G 和 AI;Material UI 4.2.1 发布 | 极客头条
- 数据库的 N 多骚操作了解一下?
- 马化腾回应“腾讯没有梦想”;抖音用户破 2 亿;罗永浩微博打假 | 极客头条...
- 如何利用机器学习算法解读股市行情?