vue中插槽的使用

1.匿名插槽

//父组件
<div id="parent">
	//在父组件中使用子组件，如果未传递元素，则直接显示子组件slot中的内容
    <child></child> 
    <div>----------------------------</div>
    //如果传递了元素，则子组件的slot中的内容将会被替代成传递的元素
    <child>
      <p>我是111</p>
      <p>2222</p>
    </child>
  </div>

//子组件
<template id="child">
    <div>
      <div>111</div>
      <slot>按钮</slot>
    </div>
  </template>

 let vue = new Vue({
    el: '#parent',
    components: {
      child: {
        template: '#child'
      }
    }
  })

打印结果如下：

2.具名插槽

<div id="parent">
    <child></child>
    <div>----------------------------</div>
    <child>
      <p>我是111</p>
      //指明p元素替换为子元素中的name为mid的slot插槽
      <p slot="mid">2222</p>
    </child>
  </div>

  <template id="child">
    <div>
      <div>111</div>
      <slot name="left">左边</slot>
      <slot name="mid">中间</slot>
      <slot name="right">右边</slot>
    </div>
  </template>

let vue = new Vue({
    el: '#parent',
    components: {
      child: {
        template: '#child'
      }
    }
  })

打印结果为：