<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<father>
<h1 slot="top">我是上面插槽</h1>
<p slot="bottom">我在下面插槽</p>
<p>我是没有命名的插槽</p>
没有命名的插槽存放其他所有
</father>
</div>
<template id="father">
<div>
<slot name="top"></slot>
我是父组件
<slot name="bottom"></slot>
<hr>
<slot></slot>
</div>
</template>
<script src="vue.js"></script>
<script>
Vue.component("father",{
template:"#father"
});
new Vue({
el:"#app",
data:{
}
});
// 插槽的作用：可以自定义组件的部分内容
// 正常情况下：组件标签内部的内部不会被解析
// 如果需要被解析添加slot插槽，插槽相当于把标签内部的元素全部替换
// 如果想单个替换，需要给元素起一个名字。
// 例如：<div slot='top'></div> <slot name='top'></slot>
//插槽会解析相同的名字
</script>
</body>
</html>
结果截图：
