Vue的Slot插槽的使用

雨点打透心脏的1/2处 2022-11-07 13:30 156阅读 0赞

## Vue的Slot插槽的使用 ##

Vue中我们使用 `<slot>` 元素作为承载分发内容的出口，可以引用在组合组件的场景中。

下面我用一个综合案例来表现插槽的使用：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    			<p>列表</p>
    				<ul>
    					<li>java</li>
    					<li>linux</li>
    					<li>python</li>
    				</ul>
    			
    			<todo>
    				<todo-title slot="todo-title" :title="title"></todo-title>
    				<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    			</todo>
    		</div>
    	</body>
    	
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    	<script type="text/javascript"> Vue.component("todo",{ template: '<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ props:["title"], template:"<div>{ {title}}</div>" }) Vue.component("todo-items",{ //组件名 props:["item"], //组件的属性名 不能用驼峰命名法 template:"<li>{ {item}}</li>" }) new Vue({ el:"#app", data:{ title:"水果", todoItems:["苹果","香蕉","榴莲"] } }); </script>
    </html>

显示效果：  
![在这里插入图片描述][2021031216190180.png]

[2021031216190180.png]: /images/20221023/31e46e0b148d44d083d71677f1cf2839.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 插槽（slot）

我们经常需要使用插槽分发内容。在使用组件时，我们常常要像这样组合它们： <app> <app-header></app-header> <

港控/mmm°/ 2023年05月31日 12:05/ 0 赞/ 11 阅读

相关 vue slot插槽

一、介绍：slot可以理解为占位符，在子组件中给父组件站位。二、举例说明： 1、没有插槽：（1）父组件： <template> <div>

墨蓝/ 2022年12月27日 01:30/ 0 赞/ 233 阅读

相关 Vue的Slot插槽的使用

Vue的Slot插槽的使用 Vue中我们使用 `<slot>` 元素作为承载分发内容的出口，可以引用在组合组件的场景中。下面我用一个综合案例来表现插槽的使用：

雨点打透心脏的1/2处/ 2022年11月07日 13:30/ 0 赞/ 157 阅读

相关 Vue插槽slot的使用

vue官方文档中关于slot插槽的说明很简短，语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于

浅浅的花香味﹌/ 2022年10月10日 04:41/ 0 赞/ 177 阅读

相关 Vue_使用插槽（slot）

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？如果我们像正常父向子传值那样操作。 <sl

╰半夏微凉°/ 2022年05月22日 13:42/ 0 赞/ 320 阅读

相关 Vue slot插槽

我们对于slot这个概念或许不是很清楚，但是我们在实际的使用中可能已经遇到很多次了。比如我们在使用ivew组件库的时候，就会经常遇到slot这个单词。而实际上，slot的使用更

一时失言乱红尘/ 2022年05月12日 12:38/ 0 赞/ 256 阅读

相关 Vue-slot插槽

1、插槽内容 ![20190125111259437.png][] <script src="https://cdn.jsdelivr.net/npm/vue

忘是亡心i/ 2022年04月23日 07:56/ 0 赞/ 310 阅读

相关 vue slot 插槽的使用

父组件 <template> <div> <h3>这里是父组件</h3> <ceshitab :li

喜欢ヅ旅行/ 2022年03月20日 11:26/ 0 赞/ 232 阅读

相关 vue 插槽 slot

\[vue\] 插槽 slot  <div data-note-content="" class="show-conte

小咪咪/ 2022年01月20日 05:34/ 0 赞/ 332 阅读

相关 vue 插槽slot的基本使用

1.基本使用 <div id="root"> <child> <p>Dell</p>

r囧r小猫/ 2021年11月02日 09:16/ 0 赞/ 539 阅读