vue组件插槽的使用方法

组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

匿名插槽:

A组件：
先注册B组件 alert-box
  <div>
    //这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>
B组件：
	<div>
		//当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
		//插槽内可以包含任何模板代码，包括 HTML
		<slot>默认内容</slot>
	</div>

具名插槽:

• 具有名字的插槽
• 使用 slot 中的 “name” 属性绑定元素

A组件：
先注册B组件 base-layout
	<base-layout>
//通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上如果没有匹配到 则放到匿名的插槽中
      <p slot='header'>头部信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息</p>
    </base-layout>

B组件：
	<div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
    </div>

作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的slot，又可以使slot内容不一致

A组件：
先注册B组件 fruit-list
<div id="app">
	//1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
	//但样式希望不一样 这个时候我们需要使用作用域插槽 
	<fruit-list :list='list'>
	//2、 父组件中使用了<template>元素,而且包含scope="slotProps",slotProps在这里只是临时变量   
		<template slot-scope='slotProps'>
			<strong v-if='slotProps.info.id==3'>
				{{slotProps.info.name}}		         
         	</strong>
       		<span v-else>{{slotProps.info.name}}</span>
       	</template>
	</fruit-list>
</div>
<script>
	var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
</script>


B组件：
<div>
	<li :key='item.id' v-for='item in list'>
	//3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
	//插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
	//如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
		<slot :info='item'>{{item.name}}</slot>
	</li>
</div>
<script>
var vm = new Vue({
	props: ['list']
})
</script>