찾다

집  >  기사  >  웹 프론트엔드  >  슬롯을 사용하여 Vue.js의 상위 구성 요소에서 하위 구성 요소로 데이터 전달

슬롯을 사용하여 Vue.js의 상위 구성 요소에서 하위 구성 요소로 데이터 전달

青灯夜游
青灯夜游앞으로
2020-09-19 11:08:553101검색

이 글에서는 Vue 슬롯을 사용하여 Vue.js의 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

슬롯을 사용하여 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 &#39;./components/Test.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test
  }
}
</script>

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

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

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

npm run serve

命名插槽

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

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</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: &#39;Test&#39;
}
</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>
🎜🎜🎜여기에서 다운로드하십시오 Vue 시작 프로젝트🎜🎜🎜다운로드한 프로젝트의 압축을 풉니다🎜🎜🎜 압축을 푼 파일로 이동하고 명령을 실행하여 모든 종속성 항목을 만듭니다. 최신 소식을 받아보세요: 🎜
<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>
🎜🎜🎜Vue 슬롯이 무엇인가요? 🎜🎜🎜🎜Vue 슬롯은 Vue 팀이 템플릿 콘텐츠 배포를 위한 플랫폼을 제공하기 위해 만든 Vue 템플릿 요소입니다. 이는 초안 웹 구성 요소 사양에서 영감을 받아 콘텐츠 배포 API를 구현한 것입니다. Vue 슬롯을 사용하면 프로젝트의 다양한 구성 요소 간에 HTML 코드를 전달하거나 배포할 수 있습니다. 🎜🎜🎜🎜Vue 슬롯이 왜 중요한가요? 🎜🎜🎜🎜🎜콘텐츠 배포는 여러 가지 이유로 중요하며 그 중 일부는 구조와 관련이 있습니다. Vue 슬롯을 사용하면 HTML 인터페이스를 구성할 수 있으며(TypeScript와 유사) 템플릿 주입을 통해 구성 요소를 구축하기 위한 가이드로 사용할 수 있습니다. 이는 한 구성 요소에서 다른 구성 요소로 템플릿 코드를 전달하기 위한 매우 확장 가능하고 효율적인 솔루션입니다. 🎜🎜🎜🎜🎜콘텐츠 위치 지정은 Vue 슬롯의 또 다른 훌륭한 사용 사례입니다. 템플릿을 생성한 다음 다른 구성 요소나 상위 구성 요소를 사용하여 사용자 인터페이스에 표시하려는 방식으로 템플릿을 정렬하면 됩니다. 🎜🎜🎜🎜슬롯 대 Props 🎜🎜🎜🎜 Vue 슬롯에 대해 알고 있다면 prop과 슬롯이 같은 일을 하는지 궁금할 것입니다. 글쎄요, 이러한 도구나 플랫폼의 핵심 아이디어는 자원의 재사용성과 효율성을 장려하는 것입니다. 이를 염두에 두고 슬롯과 소품은 유사합니다. 🎜🎜props는 구성 요소 간 데이터 개체 전달을 처리하고, 슬롯은 구성 요소 간 템플릿(html) 콘텐츠 전달을 처리합니다. 그러나 범위가 지정된 슬롯은 props와 똑같이 동작합니다. 이 튜토리얼에서는 이에 대해 명확하게 설명합니다. 🎜🎜🎜🎜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>
🎜상위 구성 요소(하위 구성 요소에 삽입될 HTML 콘텐츠가 있는 위치)는 다음과 같습니다.🎜rrreee🎜이 조합은 다음과 같은 사용자 인터페이스를 반환합니다.🎜rrreee🎜참고 슬롯이 콘텐츠를 삽입할 수 있는 위치와 방법에 대한 가이드 역할을 하는 방식이 핵심 아이디어입니다. 🎜🎜🎜🎜Demo🎜🎜🎜🎜이 글을 처음부터 따라하셨다면 vs code에서 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: &#39;Test&#39;,
  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/

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

위 내용은 슬롯을 사용하여 Vue.js의 상위 구성 요소에서 하위 구성 요소로 데이터 전달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 logrocket.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：25 초보자 Vue.js 인터뷰 질문다음 기사：25 초보자 Vue.js 인터뷰 질문

관련 기사

더보기