1 Overview
Content distribution: Mix the content of the parent component with the child component's own template.
2, a single slot
When the child component template has only one slot with no attributes, the entire content fragment passed in by the parent component is inserted into the DOM where the slot is, replacing the slot label itself.
Anything originally in the <slot> tag is considered alternate content. Alternate content is compiled in the scope of the child component and is only displayed if the host element is empty and there is no content to insert.
<!DOCTYPE html>
<html lang="zh">
<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 内容分发 slot</title>
</head>
< body >
< div id ="root" >
< div >
< h1 > I am the title of the parent component </ h1 >
< my-component >
< p > this is some initial content </ p >
< p > this is more Multiple initial content </ p >
</ my-component >
</ div >
</ div >
< script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
<script type="text/javascript">
Vue.component('my-component', {
template: ` < div >
< h2 > I am the title of the child component < / h2>
< slot >
Only shown if there is no content to distribute.
< / slot>
< h2 > end of child component < / h2>
< / div>`,
data: function () {
return {
}
}
})
new View({
el: ' #root ' ,
data: {
messages: ''
}
})
</script>
</body>
</html>
3. A mix of named and anonymous
<!DOCTYPE html>
<html lang="zh">
<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 内容分发 slot</title>
</head>
<body>
<div id="root">
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('app-layout', {
template: `<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>`,
data: function() {
return {
}
}
})
new Vue({
el: '#root',
data: {
messages: ''
}
})
</script>
</body>
</html>