vue使用slot分发内容与react使用prop分发内容

更新日期: 2019-09-09阅读: 1.6k标签: slot

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 (
    <>
      <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 进行传递。


链接: https://www.fly63.com/article/detial/5836

Vue.js的组件中的slot和props

props是用来接收参数的 例如父组件向子组件传参 可以放在props中;插槽 slot分发模式主要用于在组件中插入标签或者组件之间的相互嵌套,个人认为如果组件中有需要单独定义的地方可以使用slot

Vue slot插槽

插槽用于内容分发,存在于子组件之中。插槽作用域:父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪。子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据。

vue 中的slot 和 mixins

vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种...下面对这两种方式做一下记录,插槽使用场景- 该组件被多个地方使用- 每个父组件中对该组件的内部有一部分需要特殊定制

vue2.6中slot的新用法

最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?

让你的组件千变万化,Vue slot 剖玄析微

Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么

高级 Vue 技巧:控制父类的 slot

首先来思考一个问题:是否有一种方法可以从子组件填充父组件的插槽?最近一位同事问我这个问题,答案很简单:可以的。但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题

Vue3中插槽(slot)用法汇总

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!