将 <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>
每个组件都可以获取到 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>
</>
)
}
有时我们需要多个插槽。对于这样的情况,<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> 中的内容都会被视为默认插槽的内容。
注意:组件可以接受任意 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 进行传递。
props是用来接收参数的 例如父组件向子组件传参 可以放在props中;插槽 slot分发模式主要用于在组件中插入标签或者组件之间的相互嵌套,个人认为如果组件中有需要单独定义的地方可以使用slot
插槽用于内容分发,存在于子组件之中。插槽作用域:父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪。子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据。
vue 为我们提供了很多复用性的方式,slot 和 mixins 就是其中两种...下面对这两种方式做一下记录,插槽使用场景- 该组件被多个地方使用- 每个父组件中对该组件的内部有一部分需要特殊定制
最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?
Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么
首先来思考一个问题:是否有一种方法可以从子组件填充父组件的插槽?最近一位同事问我这个问题,答案很简单:可以的。但我的解决方案可能和你想的完全不一样,这是涉及一个棘手的Vue架构问题
Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!