vue 插槽_了解Vue插槽

vue 插槽

In this article, we will get a full understanding of slot through practical application of it various use cases.

在本文中，我们将通过实际使用各种用例来全面了解插槽。

什么是插槽 (What is slot)

Slots are reserved space offered by vuejs to display content passed down from one component to another. There are two types of slot in vuejs namely: named slot and unnamed(default) slot.

插槽是vuejs提供的保留空间，用于显示从一个组件传递到另一个组件的内容。 vuejs中有两种类型的插槽，分别是：命名插槽和未命名(默认)插槽。

实际用例 (Practical Use Case)

• To pass down Html elements from one component to another.

•将HTML元素从一个组件传递到另一个组件。

With props, vue allows us to pass strings, objects, arrays and functions from a parent component to its child component. While it is possible for us to pass html elements from a parent to it child component as string this will make our website vulnerable to cross site scripting attack that is why vuejs provides us with slot which is a more secure and reliable method of passing html element and other contents from parent to its child component for rendering.

通过props，vue允许我们将字符串，对象，数组和函数从父组件传递到其子组件。 虽然我们可以将html元素作为字符串从父元素传递给它的子元素，但这将使我们的网站容易受到跨站点脚本攻击，这就是vuejs为我们提供插槽的原因，这是一种更安全可靠的html元素传递方法以及从父级到子级组件的其他内容进行渲染。

如何使用插槽 (How to Use Slot)

In the child component where the content is to be displayed, add the slot tag as follows:

在要显示内容的子组件中，如下添加插槽标签：

In this tutorial we will generate our project with the vue CLI

在本教程中，我们将使用vue CLI生成我们的项目

vue create slot-project

vue create slot-project

In the src folder create a components folder with parent.vue and child.vue files

在src文件夹中，创建带有parent.vue和child.vue文件的components文件夹

Add the code below to child.vue

将以下代码添加到child.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Child Component</h2>
            </div>
        </div>
    </div>
</template><script>
    export default {    }
</script>
<style>
</style>
Add the code snippet below to parent.vue<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Parent</h2>
               <child-component>
                    <h3 class="child-content">You are my first child</h3>
                    <h4 class="child-content">Your name is Tom</h4>
               </child-component>
            </div>
        </div>
    </div>
</template><script>
import child from './child.vue'
    export default {
        components: {
            child-component: child
        }
    }
</script><style>
</style>

Here we imported the child component and pass down the html content to the child.

在这里，我们导入了子组件，并将html内容传递给该子组件。

For these contents to be displayed in the child component, the slot tag must be added to the child component.

为了将这些内容显示在子组件中，必须将slot标签添加到子组件中。

Add the slot tag to the child.vue file as follow:

将slot标签添加到child.vue文件中，如下所示：

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Child Component</h2>
               <slot></slot>
            </div>
        </div>
    </div>
</template><script>    export default {    }
</script><style>
</style>

In app.js file add the parent.vue component

在app.js文件中添加parent.vue组件

<template>
    <div class="app">
        <Parent/>
    </div>
</template><script>
import Parent from './components/Parent'
    export default {
      components: {
          Parent
      }  
    }
</script><style>
</style>

Now, we can verify that slot is working as expected.

现在，我们可以验证该插槽是否按预期工作。

npm run serve

npm run serve

Now our app should be like:

现在我们的应用程序应该像：

样式插槽组件 (Styling Slot Component)

For styling our slot component, the css styles should be added to the component with the slot tag.

为了给我们的插槽组件添加样式，应该使用slot标签将css样式添加到组件中。

So in child.vue component we will add the following styles to the html content received from the parent.vue component.

因此，在child.vue组件中，我们会将以下样式添加到从parent.vue组件接收的html内容中。

<style>
.child-content {
    background-color: blue;
    color: red;
}
</style>

使用多个插槽 (Using Multiple Slots)

In order to use multiple slots in vue, vuejs provides us with a way to name our slots.

为了在vue中使用多个插槽，vuejs为我们提供了一种命名插槽的方法。

What if we want the h2 and h3 tags in the parent component to be displayed individually in separate slots. This would be a typical use case for named slots.

如果我们希望将父组件中的h2和h3标签分别显示在单独的插槽中，该怎么办。 这将是命名插槽的典型用例。

In the Parent.vue component we will name our slots as follows:

在Parent.vue组件中，我们将按以下方式命名广告位：

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Parent</h2>
               <child-component>
                    <h3 class="child-content" slot="message">You are my first child</h3>
                    <h4 class="child-content" slot="name">Your name is Tom</h4>
               </child-component>
            </div>
        </div>
    </div>
</template>

In the child.vue component we will recieve the named slot as follows:

在child.vue组件中，我们将收到命名的插槽，如下所示：

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
               <h2>Child Component</h2>
               <slot name="message"></slot>
               <slot name="name"></slot>
            </div>
        </div>
    </div>
</template>

Here vuejs reserves two slots to display the content of the slot attribute with the value of message and name as separate contents.

在这里，vuejs保留了两个插槽，以显示slot属性的内容，其中message和name的值为单独的内容。

寻找Vue模板？ (Looking for Vue Templates?)

• Try our Vuetify Templates and create stunning web applications for unlimited client projects and personal projects.

  试试我们的Vuetify模板 ，为无限的客户项目和个人项目创建出色的Web应用程序。

• Start building web applications and products using our Free Vuejs Templates without any investment.

  无需任何投入，即可使用我们的免费Vuejs模板开始构建Web应用程序和产品。

结论 (Conclusion)

In this article we have seen a practical use case of slots to transfer content from a parent component to a child component. For more information on slot, check out the Vue documentation.

在本文中，我们已经看到了一个插槽的实际用例，可以将内容从父组件传输到子组件。 有关插槽的更多信息，请查看Vue文档。

翻译自: https://medium.com/js-dojo/understanding-vue-slots-6f9357b22e4a

vue 插槽