vue和react的内容分发

Thomas 2019-9-13 拓展

vue的slot

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

<!-- layout.vue -->
<div class="container">
  <main>
    <slot></slot>
  </main>
</div>

1
2
3
4
5
6

当组件渲染的时候，slot 将会被替换该组件起始标签和结束标签之间的任何内容


<!-- home.vue -->
<div class="container">
  <layout>
    <p>在vue里面传递组件，内容分发.</p>
    <p>And another one.</p>
 </layout>
</div>

1
2
3
4
5
6
7
8

react的children

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。

class Layout extends Component {
  render() {
    return (
      <div className="container">
        <main>
          {this.props.children}
        </main>
      </div>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11

props 是 React 组件的输入。它们是从父组件向下传递给子组件的数据。

function Home (params) {
  return (
    <>
      <Layout>
        <p>在react项目里面传递组件</p>
        <p>And another one.</p>
      </Layout>
    </>
  )
}

1
2
3
4
5
6
7
8
9
10

vue的多个solt

有时我们需要多个插槽。对于这样的情况，slot 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

1
2
3
4
5
6
7
8
9
10
11

一个不带 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>

1
2
3
4
5
6
7
8
9
10
11
12
13

现在 '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>
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

少数情况下，你可能需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用 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>
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递。这种方法类似Vue“槽”（slot）的概念，但在 React 中没有“槽”这一概念的限制，你可以将任何东西作为 props 进行传递。

原文;

vue和react的内容分发

# vue的slot

# react的children

# vue的多个solt

# react传递多个内容

vue的slot

react的children

vue的多个solt

react传递多个内容