如何通过带有Vue插槽的组件传递HTML内容

这篇文章将向您介绍如何使用vue插槽在vue.js中将数据从父组件传递到子组件。这篇文章适合所有阶段的开发人员（包括初学者）。

 

 

在你开始之前

您的计算机上将需要以下内容：

• 已安装Node.js版本10.x及更高版本。 您可以通过在终端/命令提示符中运行以下命令来验证版本：node -v

• 代码编辑器； 推荐Visual Studio Code

• Vue的最新版本，已全局安装在您的计算机上

• 您的计算机上已安装Vue CLI 3.0。 为此，请先卸载旧的CLI版本：

npm uninstall -g vue-cli

然后，安装新的：

npm install -g @ vue / cli

• 解压下载的项目

• 导航到解压缩的文件并运行命令以使所有依赖项保持最新：

npm install

 

什么是Vue插槽？

Vue插槽是Vue团队创建的Vue模板元素，旨在为模板内容分发提供平台。 它是受Web组件规范草案启发的内容分发API的实现。 使用Vue插槽，您可以在项目中的各个组件之间传递或分发html代码。

 

为什么Vue插槽很重要？

内容分布很重要，原因有很多，其中一些与结构有关。使用vue插槽，可以构造一个html接口（类似于typescript），然后可以将其用作通过模板注入构建组件的指南。它是一个非常可伸缩和高效的解决方案，可以将模板代码从一个组件传递到另一个组件。

内容定位是Vue插槽的另一个很好的用例。您只需创建一个模板，然后使用另一个组件或父组件按照您希望模板显示在用户界面中的方式排列该模板。

 

插槽与道具

如果您了解Vue插槽，您可能会想知道道具和插槽是否做同样的事情。 好了，这些工具或平台的中心思想是鼓励资源的可重用性和效率。 考虑到这一点，插槽和道具是相似的。

props处理在组件之间传递数据对象，而slot处理在组件之间传递模板（html）内容。但是，作用域插槽的行为与道具完全一样；这将在本教程中清楚地说明。

 

Vue插槽语法

对于插槽，您的子组件充当您希望如何安排内容的接口或结构。可能是这样的：

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件（要注入子组件的HTML内容所在的地方）可以如下所示：

<Test>
   <h2>Hello World!</h2>
 </Test>

此组合将返回如下所示的用户界面：

<template>
  <div>
    <h2>Hello World!</h2>
  </div>
</template>

请注意，它本身的插槽是如何作为内容注入位置和方式的指南的——这是中心思想。

 

演示

如果您从一开始就关注这篇文章，那么您将在vs代码中打开vue starter项目。为了演示语法部分中的简单示例，我们的父组件将是app.vue文件。打开app.vue文件并在此代码块中复制：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2>Hello World!</h2>
    </Test>
  </div>
</template>
<script>
import Test from './components/Test.vue'
export default {
  name: 'app',
  components: {
    Test
  }
}
</script>

子组件将成为测试组件，因此请在test.vue文件中复制下面的代码块：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'Test'
}
</script>

使用以下命令在开发环境中运行应用程序：

npm run serve

 

命名插槽

Vue允许一个组件有多个插槽，这意味着您可以拥有任意数量的插槽。要测试此功能，请将此新代码块复制到test.vue文件中：

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'Test'
}
</script>

如果运行应用程序，可以看到hello world被打印了三次。因此，如果您想添加更多的内容（例如，一个标题、一个带有文本的段落，然后是一个无序的列表），vue允许我们命名作用域，以便它可以标识要显示的特定作用域。在test.vue文件中命名插槽如下：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: 'Test'
}
</script>

现在，还必须根据要在其中显示HTML元素的槽名来标记这些HTML元素。将此复制到app.vue文件的模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2 slot="header">Hello world!</h2>
      <p slot="paragraph">Hello, I am a paragraph text</p>
      <ul slot="links">
        <li>Hello, I am a list item</li>
        <li>Hello, I am a list item</li>
      </ul>
    </Test>
  </div>
</template>

 

v-castle语法

当VUE版本2.6发布时，它附带了一个更好的语法来引用名为v-slot的子组件中的插槽名称，这意味着要替换初始的插槽语法。因此，与其使用这样的槽来替代父组件模板：

<Test>
   <h1 slot="header">Hello world!</h1>
</Test>

从3.0版开始，它现在将如下所示：

<Test v-slot:header>
   <h1>Hello world!</h1>
</Test>

注意，除了字符串从slot到v-slot的细微变化外，还有一个重大变化：v-slot只能在模板上定义，而不能在任何html元素上定义。这是一个很大的变化，因为它质疑命名插槽的可用性，但截至本文撰写之时，插槽仍然是文档的很大一部分。

 

作用域插槽

设想一个场景，其中Vue插槽还可以从父组件访问子组件中的数据对象，这是一种具有道具功能的插槽。要说明这一点，请继续，通过将下面的代码块复制到test.vue文件中，在子组件中创建一个数据对象：

<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

与普通props一样，v-bind指令用于将数据中的团队与父组件中的prop引用绑定。打开app.vue文件并将下面的代码块复制到模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h2>Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

如果运行应用程序，您将看到数据对象已成功传递到父组件。

vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

结论

本文向您介绍了vue.js中的插槽，以及它们对内容注入的重要性。您看到了如何设置它，甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。