Using slots to pass data from parent component to child component in Vue.js

This article will introduce to you how to use Vue slots to pass data from parent components to child components in Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#This article is suitable for developers of all stages (including beginners).

Before you begin

You will need the following on your computer:

• Already Install Node.js version 10.x and above. You can verify the version by running the following command in Terminal/Command Prompt: node -v

• Code Editor; Visual Studio Code

  # is recommended
• ##The latest version of Vue, installed globally on your computer

• Vue CLI 3.0 is installed on your computer. To do this, first uninstall the old CLI version:

npm uninstall -g vue-cli

Then, install the new one:

npm install -g @ vue / cli

• Download here

  Vue Getting Started Project

• Unzip the downloaded project

• Navigate to the unzipped file and run the command to keep all dependencies up to date :

npm install

What are Vue slots?

Vue slot is a Vue template element created by the Vue team to provide a platform for template content distribution. It is an implementation of the Content Distribution API inspired by the draft Web Components specification. Using Vue slots, you can pass or distribute HTML code between various components in your project.

Why are Vue slots important?

Content distribution is important for many reasons, some of which have to do with structure. Using Vue slots, an HTML interface can be constructed (similar to TypeScript) which can then be used as a guide for building components via template injection. It is a very scalable and efficient solution for passing template code from one component to another.

Content positioning is another great use case for Vue slots. You simply create a template and then use another component or parent component to arrange the template the way you want it to appear in the user interface.

Slots vs. Props

#If you know about Vue slots, you might be wondering whether props and slots do the same thing. Well, the central idea of ​​these tools or platforms is to encourage reusability and efficiency of resources. With this in mind, slots and props are similar.

Props handles passing data objects between components, while slot handles passing template (html) content between components. However, scoped slots behave exactly like props; this will be clearly explained in this tutorial.

Vue Slot Syntax

For slots, your subcomponent acts as an interface or structure for how you want your content to be arranged. It might look like this:

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

The parent component (where the HTML content to be injected into the child component resides) could look like this:

<Test>
   <h2 id="Hello-nbsp-World">Hello World!</h2>
 </Test>

This combination will return a user interface that looks like this:

<template>
  <div>
    <h2 id="Hello-nbsp-World">Hello World!</h2>
  </div>
</template>

Note how the slot itself serves as a guide for where and how content should be injected - this is the central idea.

Demo

If you have followed this article from the beginning, you will open

vue starter# in vs code ##project. To demonstrate the simple example in the syntax section, our parent component will be the app.vue file. Open the app.vue file and copy in this code block: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;img src=&quot;/static/imghwm/default1.png&quot; data-src=&quot;./assets/logo.png&quot; class=&quot;lazy&quot; alt=&quot;Vue logo&quot; &gt; &lt;Test&gt; &lt;h2 id=&quot;Hello-nbsp-World&quot;&gt;Hello World!&lt;/h2&gt; &lt;/Test&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import Test from &amp;#39;./components/Test.vue&amp;#39; export default { name: &amp;#39;app&amp;#39;, components: { Test } } &lt;/script&gt;</pre> The child component will be the test component, so copy the below in the

test.vue

file Code block: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/template&gt; <script> export default { name: &#39;Test&#39; } </script></pre> Use the following command to run the application in the development environment:

npm run serve

Named slotVue A component is allowed to have multiple slots, meaning you can have any number of slots. To test this functionality, copy this new code block into the

test.vue

file: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;slot&gt;&lt;/slot&gt; &lt;slot&gt;&lt;/slot&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &amp;#39;Test&amp;#39; } &lt;/script&gt;</pre> If you run the application, you can see

hello world

being printed Three times. So if you want to add more content (for example, a title, a paragraph with text, and then an unordered list), Vue allows us to name the scope so that it can identify the specific scope to display. Name the slots in the test.vue file as follows: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt; &lt;slot name=&quot;paragraph&quot;&gt;&lt;/slot&gt; &lt;slot name=&quot;links&quot;&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: &amp;#39;Test&amp;#39; } &lt;/script&gt;</pre> Now, you must also mark these HTML elements according to the slot name in which you want them to be displayed. Copy this to the template section of the

app.vue

file: <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div id=&quot;app&quot;&gt; &lt;img src=&quot;/static/imghwm/default1.png&quot; data-src=&quot;./assets/logo.png&quot; class=&quot;lazy&quot; alt=&quot;Vue logo&quot; &gt; &lt;Test&gt; &lt;h2 id=&quot;Hello-nbsp-world&quot;&gt;Hello world!&lt;/h2&gt; &lt;p slot=&quot;paragraph&quot;&gt;Hello, I am a paragraph text&lt;/p&gt; &lt;ul slot=&quot;links&quot;&gt; &lt;li&gt;Hello, I am a list item&lt;/li&gt; &lt;li&gt;Hello, I am a list item&lt;/li&gt; &lt;/ul&gt; &lt;/Test&gt; &lt;/div&gt; &lt;/template&gt;</pre>

v-castle syntaxWhen the VUE version When 2.6 was released, it came with a better syntax for referencing slot names in subcomponents named

v-slot

, which meant replacing the initial slot syntax. So instead of replacing the parent component template with a slot like this: <pre class='brush:php;toolbar:false;'>&lt;Test&gt; &lt;h1 id=&quot;Hello-nbsp-world&quot;&gt;Hello world!&lt;/h1&gt; &lt;/Test&gt;</pre> Starting with version 3.0, it will now look like this:

<Test v-slot:header>
   <h1 id="Hello-nbsp-world">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 src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test v-slot="{team}">
      <h2 id="Hello-nbsp-world-nbsp-my-nbsp-team-nbsp-is-nbsp-team">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视频教程精选

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

The above is the detailed content of Using slots to pass data from parent component to child component in Vue.js. For more information, please follow other related articles on the PHP Chinese website!