Vue之插槽使用

桃扇骨 2022-05-19 11:52 242阅读 0赞

**目录**

插槽简介

示例代码

运行结果

--------------------

# 插槽简介 #

vue通过插槽和具名插槽可以向子组件传递dom元素，子组件可以在template通过<slot>标签引用即可。

# 示例代码    #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>插槽slot</title>
    		<script type="text/javascript" src="js/vue.js" ></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			<child>
    				
    				<h1>h1 title</h1>
    			</child>
    			
    			<body-component>
    				
    				<div slot='header'>header</div>
    				<div slot='footer'>footer</div>
    			</body-component>
    		</div>
    		
    		<script>
    			//子组件child使用<slot></slot>接收外部传入的dom元素
    			Vue.component('child',{
    				template: `<div>
    									 <p>content</p>
    									 <slot><p>默认dom<p></slot>
    								  </div>`
    			})
    			
    			//子组件用<slot></slot>接收外部传入的多个元素，使用name区分具名slop
    			Vue.component('body-component',{
    				template: `<div>
    									 <slot name='header'></slot>
    									 <p>body content</p>
    									 <slot name='footer'></slot>
    								  </div>`
    			})
    			
    			var app = new Vue({
    				el: '#app'
    			})
    		</script>
    		
    	</body>
    </html>

# 运行结果 #

#    ![70][] #

[70]: /images/20220519/53e2fbc932db42ea8fcd410def3baf72.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue插槽---默认插槽、具名插槽、作用域插槽

目录总结 1.默认插槽 2.具名插槽 3.作用域插槽一、不使用插槽的效果 App.vue Category.vue 二、默认插槽 App.vue

浅浅的花香味﹌/ 2024年04月06日 10:08/ 0 赞/ 121 阅读

相关 vue中使用插槽

文章目录 slot 插槽 slot定义默认值多个slot 作用域插槽 slot 插槽 ![在这里插入图片描述][watermark_ty

素颜马尾好姑娘i/ 2023年07月11日 06:08/ 0 赞/ 30 阅读

相关 vue 插槽有名插槽

<body> <div id="app"> <base-layout> <p slot='header'>标题信息</p

红太狼/ 2023年01月08日 04:23/ 0 赞/ 261 阅读

相关 Vue_使用插槽（slot）

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

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

相关 Vue2.x之插槽的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2022年05月21日 23:29/ 0 赞/ 222 阅读

相关 Vue之插槽使用

目录插槽简介示例代码运行结果 -------------------- 插槽简介 vue通过插槽和具名插槽可以向子组

桃扇骨/ 2022年05月19日 11:52/ 0 赞/ 243 阅读

相关在Vue中使用插槽插槽和具名插槽/作用域插槽

在Vue中使用插槽插槽和具名插槽 <body> <div id="app"> <child content="<p>12

叁歲伎倆/ 2022年04月22日 09:02/ 0 赞/ 374 阅读

相关 Vue之插槽(slot)

slot：向组件内部指定位置传递内容单个插槽（匿名插槽）在App.vue引入子组件About.vue,在about标签加上一个div标签传递到子组件中： Ap

青旅半醒/ 2022年04月18日 01:53/ 0 赞/ 318 阅读

相关 Vue 之 slot 插槽简单使用

在`Vue`中定义组件,没什么大不了的. 我们可以定义一些组件. 比如 : 定义一个 `panel` 组件 Vue.component('panel',{

忘是亡心i/ 2021年12月21日 03:25/ 0 赞/ 325 阅读

相关 Vue插槽

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

旧城等待，/ 2021年08月19日 11:57/ 0 赞/ 465 阅读