v-slot的简单理解应用

<!--  父组件  -->
    <ep>
      <template #header>
        <h1>Here might be a page title.1</h1>
      </template>
      <p>A paragraph for the main content.2</p>
      <p>And another one.3</p>

      <template v-slot:footer>
        <p>Here's some contact info.4</p>
      </template>
      <p>And another one.5</p>
      <p>And another one.6</p>
      <template #param="param">
        <div> 名字叫：{{param.user.name}}，年龄是： {{param.user.age}}</div>
      </template>
    </ep>

<!--子组件-->
<template>
  <div class="container">
    <header>
      <!--   具名   -->
      <slot name="header"></slot>
    </header>
    <main>
      <!--   不具名   -->
      <slot><div>nanana</div></slot>
      <span><slot :user="user" name="param"></slot></span>
    </main>
    <footer>
      <!--  具名    -->
      <slot name="footer"></slot>
      footer
    </footer>
  </div>
</template>

<script>
export default {
  name: "Ep",
  data(){
    return {
        user:{
          name:'nana',
          age:18,
          love:'flower'
        }
    }
  }
}
</script>

页面显示

 

 页面元素：

 

 总结：

1. 插槽: 父组件中元素替换子组件<slot>的位置

2. 父组件中所有没有被具名插槽包裹的元素都会替换子组件中的匿名插槽<slot><slot>

3. 作用域插槽可简写为#，下次再项目中碰见别再懵逼了