Vue之Componet之作用域slot(030)

最新推荐文章于 2022-12-14 14:41:27 发布

从小白小菜开始

最新推荐文章于 2022-12-14 14:41:27 发布

阅读量111

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_31707323/article/details/116418101

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之Componet之作用域slot

1.组件内有插槽，且插槽内有默认值，不用作用域插槽时，会按组件原样展示。完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>slot02</title>
	</head>
	<body>
		<!--实例-->
		<div id="app">
			<child></child>
		</div>
		<!--子组件template,且slot内有默认内容-->
		<template id="childTemplate">
			<slot>
				<div>
				{{firstName}}-{{lastName}}
				</div>
			</slot>
		</template>
		<script>
			//定义子组件
			Vue.component("child", {
				template: "#childTemplate",
				data() {
					return {
						firstName: "li",
						lastName: "san"
					}
				}
			})
			//root
			new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
如果想改变插槽原来显示样式就要用到作用域插槽。更改代码：

在子组件的模板里自定义属性用来绑定数据。

<!--子组件template,且slot内有默认内容-->
		<template id="childTemplate">
			<slot :fn="firstName" :ln="lastName">
				<div>
				{{firstName}}-{{lastName}}
				</div>
			</slot>
		</template>

在父组件模板里，用v-slot=“name” 来接收子组件的数据。名字自定义。

<div id="app">
			<child>
				<template v-slot="name">
				<div>
				<span>your firstName is :{{name.fn}}</span>
				<span>your lastName is :{{name.ln}}</span>
				</div>					
				</template>
			</child>
		</div>

运行结果：
在这里插入图片描述
总结：
1.在子组件的模板里自定义属性用来绑定数据。
2.在父组件模板里，用v-slot=“name” 来接收子组件的数据。名字自定义。
3.如果是具名插槽，s-slot:插槽名=自定义变量。

从小白小菜开始

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之Componet之作用域slot(030)

Vue之Componet之作用域slot1.组件内有插槽，且插槽内有默认值，不用作用域插槽时，会按组件原样展示。完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>slot02</title> </head> <body&g
复制链接

扫一扫