이 글에서는 Vue 슬롯을 사용하여 Vue.js의 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
이 글은 모든 단계의 개발자(초보자 포함)에게 적합합니다.
시작하기 전에
컴퓨터에 다음이 필요합니다.
Node.js 버전 10.x 이상이 설치되어 있습니다. 터미널/명령 프롬프트에서 다음 명령을 실행하여 버전을 확인할 수 있습니다. node -vnode -v
代码编辑器； 推荐Visual Studio Code
Vue的最新版本，已全局安装在您的计算机上
您的计算机上已安装Vue CLI 3.0。 为此，请先卸载旧的CLI版本：
npm uninstall -g vue-cli
然后，安装新的：
npm install -g @ vue / cli
在此处下载Vue入门项目
解压下载的项目
导航到解压缩的文件并运行命令以使所有依赖项保持最新：
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
Code Editor, Visual Studio Code
🎜🎜Vue 권장 Vue CLI 3.0 버전이 컴퓨터에 전체적으로 설치되어 있습니다🎜🎜🎜Vue CLI 3.0이 컴퓨터에 설치되어 있습니다. 이렇게 하려면 먼저 이전 CLI 버전을 제거하십시오: 🎜<Test> <h1 slot="header">Hello world!</h1> </Test>
<Test v-slot:header> <h1>Hello world!</h1> </Test>
<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><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>vue starter 프로젝트를 열게 됩니다. 구문 섹션의 간단한 예를 보여주기 위해 상위 구성 요소는 app.vue 파일이 됩니다. app.vue 파일을 열고 다음 코드 블록을 복사하세요. 🎜rrreee🎜하위 구성 요소가 테스트 구성 요소가 되므로 아래 코드 블록을 test.vue 파일에 복사하세요. :🎜rrreee🎜개발 환경에서 애플리케이션을 실행하려면 다음 명령을 사용하세요.🎜rrreee🎜🎜🎜Named Slots🎜🎜🎜🎜Vue에서는 구성 요소에 여러 개의 슬롯이 있을 수 있으므로 원하는 만큼 많은 슬롯을 가질 수 있습니다. 이 기능을 테스트하려면 이 새 코드 블록을 test.vue 파일에 복사하세요. 🎜rrreee🎜 애플리케이션을 실행하면 hello world가 세 번 인쇄되는 것을 볼 수 있습니다. . 따라서 더 많은 콘텐츠(예: 제목, 텍스트가 있는 단락, 순서가 지정되지 않은 목록)를 추가하려는 경우 Vue를 사용하면 표시할 특정 범위를 식별할 수 있도록 범위 이름을 지정할 수 있습니다. test.vue 파일에서 슬롯 이름을 다음과 같이 지정합니다. 🎜rrreee🎜이제 HTML 요소가 표시될 슬롯 이름에 따라 표시해야 합니다. 이것을 app.vue 파일의 템플릿 섹션에 복사하세요: 🎜rrreee🎜🎜🎜v-castle 구문🎜🎜🎜🎜VUE 버전 2.6이 출시되었을 때 이름을 참조하기 위한 더 나은 구문이 제공되었습니다. v-slot의 하위 구성요소에 있는 슬롯 이름. 이는 원래 슬롯 구문을 바꾸는 것을 의미합니다. 따라서 상위 구성 요소 템플릿을 다음과 같은 슬롯으로 바꾸는 대신: 🎜rrreee🎜 버전 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>如果运行应用程序，您将看到数据对象已成功传递到父组件。
结论
本文向您介绍了vue.js中的插槽，以及它们对内容注入的重要性。您看到了如何设置它，甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。
英文原文地址：https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/
相关推荐：
更多编程相关知识，请访问：编程入门！！
위 내용은 슬롯을 사용하여 Vue.js의 상위 구성 요소에서 하위 구성 요소로 데이터 전달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
