slot可以有很多个。那么子组件对于父组件放置的多余的内容如何放到各个slot中呢？方法就是子组件给每个slot起一个名字name，父组件放置多余的元素时，给每个元素的slot属性分配一个代表slot的名字。到时候，多余的内容就会根据自己的slot属性去找具有对应名字的slot元素。
注意：
子组件可以有一个匿名的slot，当分发的多余内容找不到对应的slot时，就会进入这里面
如果子组件没有匿名的slot，当分发的多余内容找不到对应的slot时，就会被丢弃
例如，假定我们有一个 app-layout 组件，它的模板为：
<div> <header> <slot></slot> </header> <main> <slot></slot> </main> <footer> <slot></slot> </footer> </div>
父组件模版：
<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p> </app-layout>
渲染结果为：
<div> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>
作用域插槽作用域插槽也是一个插槽slot，但是他可以把数据传递给到父组件的特定元素内，然后有父组件决定如何渲染这些数据。
首先，子组件的slot需要有一些特性(prop)
Vue.component('my-component4', { template: `<div> <slot :text="hello" message="world"></slot> </div>`, data () { return { hello: [1,'2'] } } })
父组件在调用子组件时，需要在里面添加一个template元素，并且这个template元素具有scope特性
<div> <my-component4> <template scope="props"> </template> </my-component4> </div>
scope特性的值，就代表了所有子组件传过来的数据组成的对象。相当于
props = { text: '', message: '' }
最后，父组件就可以在template中渲染子组件传过来的数据了
<div> <my-component4> <template slot-scope="props"> <span>{{props.text}}</span> <span>{{props.message}}</span> </template> </my-component4> </div>
最新的Vue支持将作用域插槽的属性解构。所以上述代码可以简写为:
<div> <my-component4> <template slot-scope="{text, message}"> <span>{{text}}</span> <span>{{message}}</span> </template> </my-component4> </div>
作用域插槽也是插槽，只不过是多加了些特性，然后父组件多进行了些处理。
以上即是个人对Vue中的组件的理解，希望对大家有所帮助
您可能感兴趣的文章: