vue.js：具名插槽的使用

最新推荐文章于 2024-07-19 19:50:23 发布

零小唬

最新推荐文章于 2024-07-19 19:50:23 发布

阅读量230

点赞数 2

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55804957/article/details/128275182

版权

Vue.js 专栏收录该内容

109 篇文章 2 订阅

订阅专栏

具名插槽的使用

在这里插入图片描述

需求：替换中间插槽的内容

在这里插入图片描述
将第一个插槽的内容替换为返回按钮

在这里插入图片描述
笔记完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>具名插槽的使用</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <cpn></cpn> -->
			<cpn><span slot="center">标题</span></cpn>
			<cpn><button slot="left">返回</button></cpn>
		</div>
		<template id = "cpn">
			<div>
				<slot name = "left"><span>左边</span></slot>
				<slot name = "center"><span>中间</span></slot>
				<slot name = "right"><span>右边</span></slot>
			</div>
		</template>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					message:"hello vue"
				},
				components: {
					cpn: {
						template:'#cpn'
					}
				}
			});
		</script>
	</body>
</html>