您的位置：首页 > 产品设计 > UI/UE

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

2018-03-14 15:17 756 查看

如果说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>结果显示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航