vue编辑作用域
父组件模版的内容在父组件作用域内编译,子组件模版的内容在子组件作用域内编译。 父组件模板并不感知子组件的状态。
vue单个插槽
除非子组件模板包含至少一个 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
什么是vue的内容分发
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。
具名插槽
子组件使用slot标签规定父组件模版内容插放的位置 子组件通过name特性的值与父组件模版内容slot特性的值相关联
实现的目的:将父组件模版内容(内容必须在开闭标签内)插到子组件模版的指定位置,
子组件模版内容
<div class ="container" >
<header >
<slot name ="header" > </slot >
</header >
<main >
<slot > </slot >
</main >
<footer >
<slot name ="footer" > </slot >
</footer >
</div >
父组件模版内容
<app-layout >
<h1 slot ="header" > 这里可能是一个页面标题</h1 >
<p > 主要内容的一个段落。</p >
<p > 另一个主要段落。</p >
<p slot ="footer" > 这里有一些联系信息</p >
</app-layout >
渲染结果
<div class ="container" >
<header >
<h1 > 这里可能是一个页面标题</h1 >
</header >
<main >
<p > 主要内容的一个段落。</p >
<p > 另一个主要段落。</p >
</main >
<footer >
<p > 这里有一些联系信息</p >
</footer >
</div >