插槽slots

一、传递模块

1、父组件

<template>
  <slots-base>
     <div>
        <h1>插槽标题</h1>
        <p>插槽内容</p>
     </div>
  </slots-base>
</template>

<script>
import slotsBase from './slotsBase.vue'
export default {
  components: { slotsBase },

}
</script>

<style>

</style>

2、子组件

<template>
    <div>
        <h3>插槽基础知识</h3>
        <slot></slot>
    </div>
   
</template>

<script>
export default {

}
</script>

<style>

</style>

二、渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身在父组件模板中定义的

父组件

<template>
  <slots-base>
     <div>
        <p>{{ message }}</p>
     </div>
  </slots-base>
</template>a

<script>
import slotsBase from './slotsBase.vue'
export default {
  components: { slotsBase },
  data:{
    message:"ddddd"
  }
}
</script>

<style>

</style>

子组件

<template>
    <div>
        <slot></slot>
    </div>
   
</template>

<script>
export default {

}
</script>

<style>

</style>

三、具名插槽

• v-slot:   与 # 一样

父组件

<template>
  <slots-base>
     <template #header>
        <p>{{ message }}</p>
     </template>

     <template v-slot:main>
        <p>{{ message }}</p>
     </template>
  </slots-base>
</template>a

<script>
import slotsBase from './slotsBase.vue'
export default {
  components: { slotsBase },
  data:{
    message:"ddddd"
  }
}
</script>

<style>

</style>

子组件

<template>
    <div>
        <slot name="header"></slot>
        <hr>
        <slot name="main"></slot>
    </div>
   
</template>

<script>
export default {

}
</script>

<style>

</style>