<body>
<div
id
=
"app"
>
<!-- 组件标签中的内容不能直接在组件模板中显示，会被丢弃掉 -->
<!-- 组件标签中的内容可以通过插槽(slot)传给组件的模板 -->
<com>
<b>
组件标签中的内容能否在组件模板中显示？
</b>
</com>
</div>
</body>
<script
src
=
"vue.js"
></script>
<script
type
=
"text/html"
id
=
"com"
>
<div>
<h1>
这里是标题
</h1>
<p>
<!-- 在组件的模板中可以使用slot标签，在组件渲染时slot标签会被替换为组件使用时标签中的内容。 -->
<slot></slot>
</p>
</div>
</script>
<script>
Vue
.
component
(
"com"
,{
template:
"#com"
,
mounted
() {
// 通过插槽传入组件中的数据一般都是直接显示在组件的模板上，不需要再代码中使用，但是代码中也可以通过this.$slots获得插槽内容。
console
.
log
(
this
.
$slots
);
},
})
new
Vue
({
el:
"#app"
,
data:
{
}
})
<
/script>
