Vue之插槽使用

桃扇骨 2022-05-19 11:52 188阅读 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 条评论，188人围观）

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

相关阅读

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

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

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

相关 vue 插槽有名插槽

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

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

相关 Vue_使用插槽（slot）

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

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

相关 Vue2.x之插槽的使用

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

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

相关 Vue之插槽使用

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

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

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

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

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

相关 Vue之插槽(slot)

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

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

相关 Vue 之 slot 插槽简单使用

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

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

相关 Vue插槽

插槽新语法插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽 Pro

水深无声/ 2021年10月20日 01:22/ 0 赞/ 311 阅读

相关 Vue插槽

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

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