slot 插槽（内容分发）
混合父组件的内容与子组件自己的模板---》内容分发
父组件模板的内容在父组件作用域内编辑；子组件模板的内容在子组件作用域内编译。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slot卡槽</title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<child >
<div name="a">
21212
</div>
</child>
<navbar>
<div slot="left">
<i>图标</i>
<button>返回</button>
</div>
<div slot="right">
<i>图标</i>
<button>搜索</button>
</div>
</navbar>
</div>
<script>
Vue.component("child",{
template:`
<div>
<slot name="a"></slot>
56565656
<slot></slot>
</div>
`
})
Vue.component("navbar",{
template:`
<div>ds
<slot name="right"></slot>
<slot name="left"></slot>
</div>
`
})
new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slot卡槽</title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<child >
<template #a>
<div>111111</div>
</template>
<template #b>
<div>22222</div>
</template>
</child>
<navbar>
<template #left>
<i>图标</i>
<button>返回</button>
</template>
<template #right>
<i>图标</i>
<button>搜索</button>
</template>
</navbar>
</div>
<script>
Vue.component("child",{
template:`
<div>
<slot name="a"></slot>
child
<slot name="b"></slot>
</div>
`
})
Vue.component("navbar",{
template:`
<div>ds
<slot name="right"></slot>
<slot name="left"></slot>
</div>
`
})
new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>