怎么通过Vue插槽的组件传递HTML内容

这篇文章主要介绍“怎么通过Vue插槽的组件传递HTML内容”，在日常操作中，相信很多人在怎么通过Vue插槽的组件传递HTML内容问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么通过Vue插槽的组件传递HTML内容”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

什么是Vue插槽？

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

　　内容分发很重要，原因很多，其中一些原因与结构有关。使用Vue插槽，您可以构建HTML界面（与TypeScript一样），然后您可以将其用作通过模板注入构建组件的指南。它是一种可扩展且高效的解决方案，用于将模板代码从一个组件传递到另一个组件。

　　内容的定位是Vue插槽的另一个重要用例。您可以只创建一个模板，然后使用另一个组件或父组件来排列该模板，就像您希望它出现在用户界面中一样。

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

　　道具处理从组件到组件传递数据对象，但插槽处理传递模板（HTML）内容而不是组件。但是，范围内的插槽就像道具一样; 这将在本教程中清楚地说明。

Vue插槽语法

　　对于插槽，您的子组件充当您希望如何安排内容的界面或结构。它看起来像这样：

<template>

<div>

<slot></slot>

</div>

</ template>

父组件（要注入子组件的HTML内容所在的位置）可能如下所示：

<Test>

   <h3>Hello World!</h3>

 </Test>

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

<template>

<div>

<h3> Hello World！</h3>

</div>

</template>

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

命名插槽

　　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元素。将其复制到文件的模板部分：app.vue

<template>

<div id = ‘app’>

<img alt = ‘Vue’ class="lazy" data-src = ‘./ assets / logo.png’>

   <Test>

<h3 slot = “header”> Hello world</h3>

    <p slot = “paragraph”>我是段落文本</p>

<ul slot = “links”>

<li>您好，我是一个列表项</li>

</ul>

</Test>

</div>

</template> 

V-slots语法

当Vue版本2.6发布时，它提供了更好的语法来引用名为v-slot的子组件中的插槽名称，这意味着要替换初始插槽语法。所以，而不是像这样的插槽的父组件模板：

<Test>

< h2 slot = “header”> Hello world！</ h2 >

</ Test >

从版本3.0（应该在年底之前发布），现在看起来像这样：

<test v-slot：header >

< h2 > Hello world！</h2>

</Test>

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

Scoped插槽

想象一下这样一种场景，其中Vue槽也可以从父组件访问子组件中的数据对象 - 一种具有props能力的槽。为了说明这一点，请通过将下面的代码块复制到文件中来继续在子组件中创建数据对象：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 = “logo” class="lazy" data-src = “./assets/ logo.png” >

<Test v-slot = “{team}”>

<h3> Hello {{team}} </ h3>

</Test>

</div>

</template>

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

到此，关于“怎么通过Vue插槽的组件传递HTML内容”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！