<body>
<div
id
=
"app"
>
<friend>
<!-- 如果组件标签中有多个内容，不同的内容需要显示在组件模板中的不同地方，那么就需要使用具名插槽 -->
<!-- 组件标签中的html内容可以设置slot属性，将slot属性设置为xxx，那么这个html元素就会现在在组件模板中name值为xxx的slot插槽中。 -->
<span
slot
=
"qianming"
>
十一就要放假了
</span>
<span
slot
=
"mingzi"
>
张三
</span>
<!-- 没有设置slot属性的内容都会被显示在匿名slot(没有设置name属性的slot)中。 -->
<span>
这是没有slot属性的内容
</span>
</friend>
</div>
</body>
<script
src
=
"vue.js"
></script>
<script
type
=
"text/html"
id
=
"friend"
>
<div>
<h1>
<slot
name
=
"mingzi"
></slot>
</h1>
<p>
<slot
name
=
"qianming"
></slot>
</p>
<p>
<slot></slot>
</p>
</div>
</script>
<script>
Vue
.
component
(
"friend"
,{
template:
"#friend"
});
new
Vue
({
el:
"#app"
,
data:
{
}
});
<
/script>
