vue使用slot分发内容与react使用prop分发内容基础知识_prop使用帮助

vue将 元素作为承载分发内容的出口// layout.vue

当组件渲染的时候, 将会被替换该组件起始标签和结束标签之间的任何内容// hone.vue
<l

vue使用slot分发内容与react使用prop分发内容基础知识

vue

将 <slot> 元素作为承载分发内容的出口

vue使用slot分发内容与react使用prop分发内容基础知识_prop使用帮助

// 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 (
    <>
      <Layout
        header={
          <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 进行传递。

海计划公众号
(0)
上一篇 2020/03/24 05:39
下一篇 2020/03/24 05:39

您可能感兴趣的内容

  • UI中国入门百科_专业用户体验设计平台

    UI中国零基础入门 官方网址:http://www.ui.cn/ 简介描述:专业用户体验设计平台 UI 中国,前身为 iconfans,是专业的用户体验设计平 台。会员均为职业 U…

    2020/03/06
  • JS模块化基础入门_模块化基础入门

    模块化目前比较流行的 JS 模块化方案有 CommonJS、AMD、CMD 以及 ES6 Module,还有个 UMD 方案。CommonJSCommonJS 是服务器端的模块化方案,nodeJs 就采用了这种方案。在 CommonJS 规范中,一个文件即一个模块,用module.exports和exports定义模块输出的接口,用require加载模块。/

    2020/03/31
  • Chartist.js菜鸟攻略_JavaScript响应式图表库

    Chartist.js基础知识 官方网址:http://gionkunz.github.io/chartist-js/ GitHub:https://github.com/gion…

    2020/03/06
  • Js递归基础指南_递归入门指南

    传统的递归思想:自已调用自已,但是调用栈里面的执行上下文会越来越多,容易暴栈。采用尾递归可以规避这个问题:每次入栈出栈再入栈尾调用// 尾调用
    function f(x){return g(x);
    }// 伪代码
    ECStack.push( functionContext);ECStack.pop();ECStack.push( function

    2020/03/20
  • php.ini配置详解小白入门_php小白常识

    一、关于php ini介绍php.iniapache在启动时php.ini被读取。对于服务器模块版本的php,仅在web服务器启动时读取一次。对于CGI和CLI版本,每次调用都会被读取Apache Web服务器在启动时会把目录转到根目录,这将使得PHP尝试在根目录下读取php.ini,如果·存在的话。在php.ini中可以使用环境变量User.ini自php

    2020/03/23
  • 为什么要用webpack?使用教程_webpack指南教程

    现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;Scss,le

    Web前端 2020/03/26
  • cleave.js菜鸟教程_用于格式化文本框输入内容的插件

    cleave.js菜鸟教程 官方网址:http://nosir.github.io/cleave.js GitHub:https://github.com/nosir/cleave…

    2020/03/06
  • less文件转换为css文件使用教程_less基础教程

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。本文主要介绍less文件如何转化为css文件。1.首先,你要确认你的电脑已经安装了node。使用 npm 安装 lessc,命令行:npm install -g less2.然后,进入需要转换的less文件的

    2020/03/31
  • docsite小白知识_一款开源站点搭建工具

    docsite小白知识 官方网址:https://docsite.js.org GitHub:https://github.com/txd-team/docsite 简介描述:一款…

    2020/03/11
  • Blanket.js基础知识入门一款用于代码覆盖率测试

    Blanket.js基础入门 官方网址:http://blanketjs.org GitHub:https://github.com/alex-seville/blanket 简介…

    2020/03/05
  • 用call或bind实现bind()小白常识_bind菜鸟指南

    一、bind方法让我们看一下MDN上对bind方法的解释:bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用。也就是说bind()方法会:创建一个新的函数(这也是它和call、apply不同的点)创建的函数接收bind的第二个及以后的参数作为自己的参数那

    2020/03/24
  • 微信和支付宝中的一些常用方法封装入门基础知识_封装小白知识

    最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西,然后用这个东西写了一点demo,然后就决定采纳这个东西开发微信小程序了。这个开发体验真的是让人揪心,因为编译起来太慢了,就是这边保存完代码,你如

    2020/03/24
  • React 中 的 9 种优化技术使用攻略_优化小白攻略

    谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%。腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成 9.4% 的 PV 的下降,8.3

    2020/03/24
  • ImageModifier基础指南_图片批量处理工具

    ImageModifier基础指南 官方网址:https://www.inspire-soft.net/software/ea 简介描述:图片批量处理工具 Easy Image M…

    2020/03/11
  • JavaScript是如何成为一门真正的编程语言的?基础指南_语言菜鸟教程下载

    说到 JavaScript 的历史,最耳熟能详的便是网景公司在1995年雇佣 Brendan Eich,后者花了10天便设计出初版 JavaScript 的故事了。一方面由于设计之初的理念所致,另一方面受限于沙箱机制所隔离的能力,JavaScript 在很长一段时间内并没有在编程语言界「转正」的迹象。说来也怪,就在 JavaScript 依旧被认为是一门玩具

    2020/03/26
  • CSRF跨站请求伪造使用教程_csrf菜鸟教程下载

    CSRF 介绍CSRF,是跨站请求伪造(Cross Site Request Forgery)的缩写,是一种劫持受信任用户向服务器发送非预期请求的攻击方式。通常情况下,CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任,在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器,从而在并未授权的情况下执行在权限保护之下的操作。CSRF 攻

    2020/03/23