Vue 插槽（slot）的理解

父组件向子组件传值我们会一般用到props，那传递一个DOM节点呢？

使用插槽slot，能高效地解决父组件向子组件插入DOM节点问题。

插槽：在vue中，可以在组件内部定义一个或多个插槽，子组件决定插槽的位置，也可以设置默认的信息，父组件在插槽里插入信息，有默认信息时，父组件不插入信息，则显示子组件的默认信息；

下面就列举下关于插槽的使用方式：

1、匿名插槽

//组件（父）
  <child>
    <p>父页面</p>  //匿名插槽即为默认插槽，也可以写成 <template v-slot:default><p>父页面</p></template>
  </child>

//组件（子）
  <div class="child-page">
    <h1>子页面</h1>
    <slot></slot>
  </div>

//页面渲染结果
  <div class="child-page">
    <p>父页面</p>
  </div>

2、具名插槽

v-slot只能添加在插槽的模板template上，如果组件里只有默认插槽时，组件的标签才可以被当作插槽的模板来使用;

<child  v-slot:default="child"></child>

//组件（父）
 //写法一：
  <child>
    <template v-slot:child><p>父页面</p></template>
  </child>
 //写法二（综合写法一的简写）：
  <child>
    <template #child><p>父页面</p></template>
  </child>

//组件（子）
  <div class="child-page">
    <slot name="child">子页面</slot>
  </div>

//页面渲染结果
  <div class="child-page"><p>父页面</p></div>

 动态的具名插槽:

//组件（父）
  <child>
    <template #[slotName]><p>父页面</p></template>
  </child>

//组件（父）js:
  data(){
    return(){
      slotName:'two'
    }
  }
 

3、作用域插槽

//组件（父）
 //写法一：
  <child>
    <template #childName="data"><p>{{data.child}}</p></template>
  </child>


//组件（子）
  <div class="child-page">
    <slot :data="uesrs" name="childName"></slot>
  </div>

//组件（子）js:
  data(){
    return(){
      childData:'子组件传参',
    }
  }


//页面渲染结果
  <div class="child-page"><p>子组件传参</p></div>

子组件有多个相同名字的插槽，在父组件中同一个组件标签只插入一条插槽信息，会显示多个相同的插槽信息；

//组件（父）
  <child>
    <template #child><p>父页面</p></template>
  </child>

//组件（子）
  <div class="child-page">
    <slot name="child">子页面</slot>
    <slot name="child">子页面2</slot>
    <slot name="child">子页面3</slot>
  </div>

//页面渲染结果
  <div class="child-page">
    <p>父页面</p>
    <p>父页面</p>
    <p>父页面</p>
  </div>

 如果父组件里同一个子组件的标签有多条相同的插槽信息，但是子组件只有一个插槽，那只会显示父组件的最后一条插槽信息；