<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单插槽(Single-Slot)</title>
</head>
<body>
<div id="example">
<parent-com></parent-com>
</div>
<template id='parent-com'>
<div>
<h1>I'm the parent title</h1>
<child-com>
<p>
我是在父组件的内容，写在子组件的标签内，将会自动传入子组件模板中的slot
</p>
</child-com>
</div>
</template>
<template id='child-com'>
<div>
<h2>I'm the child title</h2>
<slot>
没有slot注入时，这段文字才会被显示。
</slot>
</div>
</template>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('parent-com', {
template: '#parent-com'
});
Vue.component('child-com', {
template: '#child-com'
});
new Vue({
el: '#example'
});
//写parent-com的时候，写到了<child-com></child-com>，本来child-com标签之间是不应该写内容的，因为内容是内部模板渲染出来的。但是如果你写了，这些html内容将会当做参数传入child-com内部定义有slot的地方。
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命名插槽</title>
</head>
<body>
<div id="example">
<parent-com></parent-com>
</div>
<template id='parent-com'>
<div>
<h1>I'm the parent title</h1>
<child-com>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</child-com>
</div>
</template>
<template id="child-com">
<div class="container">
<header>
<slot></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('parent-com', {
template: '#parent-com'
});
Vue.component('child-com', {
template: '#child-com'
});
new Vue({
el: '#example'
});
</script>
</html>
二次视频学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot内置组件</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div id="app">
<caicai>
<span slot="url">{{caiData.url}}</span> <!-- 在组件标签里传递值-->
<span slot="netName">{{caiData.netName}}</span>
<span slot="skill">{{caiData.skill}}</span>
</caicai>
</div>
<template id="tep">
<div>
<p>地址：<slot name="url"></slot></p> <!--在模版里 用slot 标签接收值-->
<p>网名：<slot name="netName"></slot></p>
<p>技术类型：<slot name="skill"></slot></p>
</div>
</template>
</body>
<script type="text/javascript">
var jinsuo={ //组件模版变量
template:"#tep" //模版 定义在 id为tep 的html的tempalte标签里
}
var app=new Vue({
el:"#app",
data:{
caiData:{ // 数据对象
url:"http://baidu.com",
netName:"菜菜",
skill:"web前端"
}
},
components:{ //组件
"caicai":jinsuo //caicai 组件名 jinsuo 是组件模版
}
})
</script>
</html>