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>