好的代码会说话，码上见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue item_14 slot</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div>
<p>slot标签 基于组件模板内 </p>
<p>slot特性可在组件 或 普通元素上 其值指向slot的具名</p>
<p>
vue组件由template，css，script 三部分构成
</p>
<p>
slot存在于template中，存在于组件标签内的内容会被分发到template中对应的slot标签元素
</p>
<p>
插槽内容可以包含任何html或其他组件模板代码
</p>
</div>
<hr>
<div id="app1">
<navigation-link url="/profile">
Your Profile 内容会被分发到组件模板上去<br>
<span class="fa fa-user">前提是组件模板上必须有slot元素</span>
<br>
<strong>slot位置也可以嵌套Vue组件模板</strong>
<noslot-nav></noslot-nav>
</navigation-link>
<div>哈</div>
<noslot-nav>我要显示没用slot元素，其实我是被丢弃，在页面看不到</noslot-nav>
</div>
<div id="app2">
<hr>
slot元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
<hr>
<p>
具名插槽使用在组件上
</p>
<base-layout>
<dhead slot="header"></dhead>
<p>A paragraph for the main content.</p>
<p>非具名插槽内容And another one.</p>
<foot slot="footer"></foot>
</base-layout>
<hr>
<p>
具名插槽使用在使用在普通元素上
</p>
<base-layout>
无名分会进入默认插槽---
<p slot="header">我是头</p>
自由民<br>
<p slot="footer">我是尾</p>
</base-layout>
</div>
<hr>
<div id="app3">
<default-slot>
<p slot="hehe">会出现默认值button</p>
</default-slot>
<default-slot>
我是内容肯定会被button收编，可怜的默认值
</default-slot>
</div>
<div id="app4">
<p>
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
</p>
</div>
<script>
// 带slot局部组件
var NavigationLink = {
template:`
<div>
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
</div>
`,
props:['url']
}
// 不带slot的组件
var NoslotNav = {
template:`
<div class=" NoslotNav"> 我是没有包含一个 slot 元素的NoslotNav组件，在我的组件标签间传入的内容，不会显示的</div>
`
}
// 使用插槽
new Vue({
components:{ NavigationLink, NoslotNav }
// 实例方法
}).$mount('#app1')
// 作用
// 将组件元素标签的内容分发到模板slot位置
////////////////////// 具名插槽 /////////////////////
// 父组件定义布局
var baseLayout = {
template:`
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
}
// 子组件 头
var dhead = {
template:`
<h1>Here might be a page title</h1>
`
}
// 子组件尾
var foot = {
template:`
<p>Here's some contact info</p>
`
}
// 使用具名插槽
new Vue({
'el':'#app2',
components:{baseLayout,dhead,foot}
})
// ------ 插槽的默认内容-----------
var defaultSlot = {
template:`
<div>
<button type="submit">
<slot>Submit</slot>
</button>
<slot name='hehe'></slot>
</div>
`
}
// 不给插槽内容，显示默认
new Vue({
el:'#app3',
components:{defaultSlot}
})
//
</script>
</body>
</html>