vue.js 插槽_vue js中的插槽是什么，何时使用

vue.js 插槽

介绍(Introduction)

Vue.js implements the content distribution API using the <slot> element. It has some similarities to the children API of React.js.

Vue.js使用<slot>元素实现内容分发API。 它与React.js的子API有一些相似之处。

So slots help us to distribute our content in other components. It’s specially useful when we want to create reusable widgets. In this approach we can make sure our distributed content will be exactly distributed inside the child component as we want.

因此，插槽可帮助我们将内容分发到其他组件中。 当我们要创建可重用的小部件时，它特别有用。 通过这种方法，我们可以确保所分发的内容将根据需要准确地分发到子组件中。

用例 (A use case)

I had a task to create a carousel for our landing page and this carousel should take totally different kinds of components (with different HTML layout and styling) as slides. But the frame which contains these slides should be the same. So same parent component but completely different Childs (content).

我的任务是为目标网页创建一个轮播，该轮播应采用完全不同类型的组件(具有不同HTML布局和样式)作为幻灯片。 但是包含这些幻灯片的框架应该相同。 因此，相同的父组件但完全不同的Child(内容)。

Even if I wanted to create a couple of carousels with the same group of slides (for example a carousel with images as children or the one with just videos), still this approach would be a great choice.

即使我想用同一组幻灯片创建几个轮播(例如，一个带有儿童图片的轮播，或者只带有视频的那个)，这种方法仍然是一个不错的选择。

如何使用它 (How to use it)

Using the slot is very easy, we should just write the <slot> component (which is a reserved word in Vue.js) inside the child component’s template, where we want to receive data.

使用插槽非常容易，我们应该在要接收数据的子组件模板内编写<slot>组件(在Vue.js中是保留字)。

This <slot> component is going to take over and renders the content we’re passing from outside (parent component). So it renders parts between opening and closing selectors of the child component in the parent component. So in the parent component:

这个<slot>组件将接管并渲染我们从外部传递的内容(父组件)。 因此，它在父组件中的子组件的打开和关闭选择器之间呈现部分。 因此，在父组件中：

A parent component passes data as slot to another component.

父组件将数据作为插槽传递给另一个组件。

So basically it allows us to pass data from outside and render them in the child component. And this data can be anything!

因此，基本上，它使我们可以从外部传递数据并将其呈现在子组件中。 这些数据可以是任何东西！

造型 (Styling)

The child component’s styling is applied to the data being passed in from outside (as slot).

子组件的样式应用于从外部(作为插槽)传入的数据。

So if we want to style your slot data, we should put our styles inside the child component and if we put these styles in the parent component (of-course if they’re not global!), they won’t work.

因此，如果我们想为您的广告位数据设置样式，则应将样式放在子组件中，如果将这些样式放在父组件中(当然，如果它们不是全局的！)，它们将无法工作。

编译中 (Compiling)

For compiling a template (which means any Vue.js operation such using a state-variable or calling a method), the component where we have the code in it’s template (parent component) will be the one doing the changes.

对于编译模板(这意味着使用状态变量或调用方法的任何Vue.js操作)，模板中包含代码的组件(父组件)将是进行更改的组件。

So for example if you want to use some variable from your data object (from the Vue instance) you have to declare it where you wrote the code and not where it passed (in the child component).

因此，例如，如果您想使用数据对象(来自Vue实例)中的某些变量，则必须在编写代码的位置而不是在代码传递的位置(在子组件中)声明它。

It’s true that we pass it finally to the child but we write it in the parent and it would take care of vue.js operations.

的确，我们最终将其传递给了子级，但我们将其写在了父级中，这将处理vue.js操作。

In parent component:

在父组件中：

Dynamic data as slot to another component.

动态数据作为另一个组件的插槽。

And in Child:

在儿童中：

The result on your raw HTML:

原始HTML上的结果：

So as we can see, if we want to use some dynamic data or any other Vue.js operation (except for styling) we should write them on the parent component.

因此，如我们所见，如果我们要使用一些动态数据或任何其他Vue.js操作(样式除外)，则应在父组件上编写它们。

And we can say styling and compiling of a slot data are in opposite of each other. Styling in child, compiling in parent.

我们可以说，插槽数据的样式和编译是相反的。 在儿童中进行样式化，在父母中进行编译。

子组件不同位置的渲染槽 (Rendering slots in different places of a child component)

If we’re passing multiple components from parent to child and we want to render them in different places in our child component we should use the named slot feature of the Vue.js.

如果我们要将多个组件从父组件传递到子组件，并且想要在子组件中的不同位置渲染它们，则应使用Vue.js的命名插槽功能。

For that in the child component we just need to add an attribute called “name” and give it some name, and then in the parent component where we’re passing the content, we should add a new attribute called slot in our component (or selector). Slot is not an official HTML attribute and it was introduced by Vue.js and is going to be used by it. So Vue.js will render the component with slot attribute in the <slot> component of the child with the exact value.

为此，我们只需要在子组件中添加一个名为“ name”的属性并为其命名，然后在传递内容的父组件中，就应在组件中添加一个名为slot的新属性(或选择器)。 Slot不是官方HTML属性，它是Vue.js引入的，将被它使用。 因此，Vue.js将使用确切值在子元素的<slot>组件中呈现具有slot属性的组件。

未命名插槽的默认行为 (Default behavior for an unnamed-slot)

If you’re passing multiple components to a child component and for example if one of them is a named-slot and one of them is an unnamed-slot, by default Vue.js will treat the unnamed one as default slot and renders it in the <slot> component without name.

如果要将多个组件传递给子组件，例如，如果其中一个是命名插槽，而其中一个是未命名插槽，则默认情况下，Vue.js会将未命名的组件视为默认插槽并将其呈现在没有名称的<slot>组件。

插槽的默认值 (Default value for a slot)

If we’re not sure that content will be passed to our child component or not, we can set up some default content to be displayed (in case of absence of that slot). For that we just need to write some data inside the opening and closing tags of <slot> in the child component.

如果不确定是否将内容传递给子组件，则可以设置一些默认内容以显示(如果没有该插槽)。 为此，我们只需要在子组件的<slot>的开始和结束标记内写入一些数据。

范围插槽 (Scoped Slots)

Sometimes, it’s useful for slot content (in the parent component) to have access to data which is only available in the child component.

有时候，访问插槽内容(在父组件中)对访问仅在子组件中可用的数据很有用。

Imagine you have some variables in your data object of your child component and somehow you want to access them in your parent component. You might see this in some packages which you used as a dependency. In this scenario the author of that package can make more flexibility by sending some of its data to outside so you can use them where you called his/her component.

想象一下，您的子组件的数据对象中有一些变量，而您想以某种方式在父组件中访问它们。 您可能在用作依赖项的某些程序包中看到了这一点。 在这种情况下，该程序包的作者可以通过将其某些数据发送到外部来提高灵活性，因此可以在调用其组件的地方使用它们。

For that in your child component you should add:

为此，您应该在子组件中添加：

to the slot component. And then you can use it in the parent component :

到插槽组件。 然后可以在父组件中使用它：

Child component:

子组件：

Parent component:

父组件：

结论 (Conclusion)

I can say slots are very great tools for distributing in your project and components. But you should be careful to not overuse them, people don’t use Slots in Vue.js as often as they use Children in React.js.

我可以说插槽是在您的项目和组件中分发的非常有用的工具。 但是您应该小心不要过度使用它们，人们在Vue.js中使用插槽的频率不如在React.js中使用子级的频率高。

翻译自: https://medium.com/@aliafsah1988/what-are-slots-in-vue-js-and-when-we-should-use-them-5e3012963377

vue.js 插槽