Vue.js 实战_3_1.pdf
5墨值下载
88
第
1
篇基础篇
</div
> ’
.,
)
}
var
app
=new
Vue
({
el
:’#
app
’
})
</script>
观察子组件的模板，在＜
slot>
元素上有一个类似
props
传递数据给组件的写法
msg
＝”
xxx
”，将
数据传到了插槽。父组件中使用了＜
template
＞元素，而且拥有
一个
scope
＝”
props
”的特性，这里的
props
只是
一
个临时变量，就像
v-for=
”
item
in
items
，，里面的
item
一
样。
template
内可以通过临时变量
props
访问来自子组件插槽的数据
msg
。
将上面的示例渲染后的最终结果为：
<div
id
=”
app
”>
<div
class
=”
container
” >
<p
＞来组父组
件的内容
＜／
p>
<p
＞来自子组件的内容＜／
p>
</div>
</div>
作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每
一
项。示例
代码如下：
<div
id
=”
app
”>
<my
-list
:books
=”
books
”>
＜
！一作用域插槽也可以是具名的
Slot
一〉
<template
slot
=”
book
”
scope
=”
props
”>
<li>
{ {
props.
bookName
) )
</
li>
</
template>
</my
-list
>
</div>
<script>
Vue.component
(’
my-list
’,{
props:
{
books:
{
type:
Array,
default:
function
() {
return
[];
},
template
:’\
<
ul
>\
<slot
name
=”
book
”\
第
7
章
组件详解
89
v-for
=”
book
in
books
”\
:
bo
o
k-name
=”
book
.
name
”
>\
〈
！一这里也可以写默认
slot
内容一
〉＼
</slot>\
<
/ul
>’
.
,
)
}
var
app
= new
Vue({
el
:’
#
app
’ ,
data:
{
books:
[
{ name
:’
<
Vue.
js
实战》
’
｝ ，
{ name :
’
《
JavaScript
语言精粹》
’
｝
，
{ name :
’
《
JavaScript
高级程序设计》
’
｝
})
</sc
ript
>
子组件
m
y
-
li
s
t
接收
一
个来自父级的
prop
数组
book
s
，
并且将它在
name
为
book
的
s
lot
上使用
v-fo
r
指令循环，同时暴露
一
个变
量
bookN
a
m
e
。
如果你仔细揣摩上面的用法，你可能会产生这样的疑问
：
我直接在父组件用
v-for
不就好了吗，
为什么还要绕
一
步
，
在子组件里面循环呢？的确
，
如果只是针对上面的示例，这样写是多此
一
举的。
此例的用意主要是介绍作用域插槽的用法
，
并没有加入使用场景
，
而作用域插槽的使用场景就是既
可以复用子组件的
sl
ot
，又可以使
s
lot
内容不
一
致。如果上例还在其
他
组件内使用，＜
Ii
＞的内容渲
染权是由使用者掌握的，而数据却可以通过临时变量（比如
props
）从子组件内获取。
7.4.5
访问
slot
在
Vu
e.
l.x
中
，
想要获取某个
s
lot
是比较麻烦的
，
需要用
v
-el
间接获取。而
Vu
e
扣
2.x
提供
了用来访问被
s
lo
t
分发的内容的方法
$
slots
，
请看下面的示例
：
<
div
id
=”
app
” >
<ch
ild-component
>
<h 2
slot
＝
”
header
”
〉
标题
＜／
h2
>
<
p
＞正文
内容
＜／
p
>
<p
＞更多
的正文内容
＜／
p
>
<div
slot
＝
”
footer
”
〉底部信息＜／
div>
<
/child-component
>
<
/div
>
<script>
Vue.component
( ’
child
-
co
mponent
’,
{
templatE!
: ’ \
<div
class
=”
container
"
>\
of 25
5墨值下载
【版权声明】本文为墨天轮用户原创内容，转载时必须标注文档的来源（墨天轮），文档链接，文档作者等基本信息，否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容，欢迎发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
下载排行榜
文档被以下合辑收录
评论