Home > Article > Web Front-end > 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 recommendednpm uninstall -g vue-cliThen, install the new one:
npm install -g @ vue / cli
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?
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>Hello World!</h2> </Test>This combination will return a user interface that looks like this:
<template>
<div>
<h2>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 openvue 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:js;toolbar:false"><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></pre> The child component will be the test component, so copy the below in the
file Code block: <pre class="brush:js;toolbar:false"><template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Test'
}
</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:js;toolbar:false"><template>
<div>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
<script>
export default {
name: &#39;Test&#39;
}
</script></pre> If you run the application, you can see
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:js;toolbar:false;"><template>
<div>
<slot name="header"></slot>
<slot name="paragraph"></slot>
<slot name="links"></slot>
</div>
</template>
<script>
export default {
name: &#39;Test&#39;
}
</script></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
file: <pre class="brush:js;toolbar:false"><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></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:js;toolbar:false"><Test>
<h1 slot="header">Hello world!</h1>
</Test></pre> Starting with version 3.0, it will now look like this:
<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/
相关推荐：
更多编程相关知识，请访问：编程入门！！
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!