关于vue.js中作用域插槽的实例

最新推荐文章于 2023-09-07 10:30:25 发布

脸盘姑娘

最新推荐文章于 2023-09-07 10:30:25 发布

阅读量1.5k

点赞数

分类专栏：个人总结

本文链接：https://blog.csdn.net/u010758038/article/details/79554969

版权

个人总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如果说props是父组件传递给子组件的字符串或者数值，那么slot就是父组件传递给子组件的html标签。

根据vue.js的官方文档（点击打开链接）作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。下面是我根据我对文档的例子的理解自己写的一个小例子，父组件通过props把uesrs传递给子组件，子组件通过v-for来进行列表渲染。需要注意的是：我一开始写的是

<table><slot title="这是一个表格"></slot><thead><th>序号</th><th>名字</th><th>年龄</th></thead><tbody v-for="item in items"><tr><td>{{item.num}}</td><td>{{item.name}}</td><td>{{item.age}}</td></tr>></tbody></table>

结果会出现错误，找了一下原因是因为v-for的渲染写错了应该用<template></template>来进行多元素渲染。

<!DOCTYPE html>
<html>
<head>
	<title>vue 作用域插槽的表格的例子</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	<script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<div id="app"  >
		<mytbale  v-bind:items="uesrs">
			<template slot-scope="table">
				<caption >{{table.title}}</caption>
			</template>
		</mytbale>
	</div>
	<script type="text/javascript">
		Vue.component('mytbale',{
			template:'<table><slot title="这是一个表格"></slot><thead><th>序号</th><th>名字</th><th>年龄</th></thead><tbody ><template v-for="item in items"><tr><td>{{item.num}}</td><td>{{item.name}}</td><td>{{item.age}}</td></tr></template></tbody></table>',
			props:['items']
		})
		new Vue({
			el:"#app",
			data:{
				uesrs:[
				{num:1,name:"h",age:12},
				{num:2,name:"s",age:13},
				{num:3,name:"m",age:14}
				]
			}
		})
	</script>
</body>
</html>

结果显示：

脸盘姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于vue.js中作用域插槽的实例

如果说props是父组件传递给子组件的字符串或者数值，那么slot就是父组件传递给子组件的html标签。根据vue.js的官方文档（点击打开链接）作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。下面是我根据我对文档的例子的理解自己写的一个小例子，父组件通过props把uesrs传递给子组件，子组件通过v-for来进行列表渲染。需要注意的是：我一开始...
复制链接

扫一扫