Vue2(16) 插槽学习笔记

文章目录

      • Vue2 插槽学习笔记
        • 一、引言
        • 二、插槽的基本用法
        • 三、具名插槽
        • 四、作用域插槽
        • 五、总结

Vue2 插槽学习笔记

一、引言

插槽(Slot)是Vue.js中一种非常强大的功能,它允许开发者在组件中预留“插槽”位置,以便在父组件中使用该组件时,可以向这些插槽位置插入自定义的内容。本文将基于Vue2官方文档,详细阐述Vue2中插槽的基本用法、具名插槽、作用域插槽等相关内容,并提供示例代码。

二、插槽的基本用法
  1. 插槽的定义

    在子组件中,使用标签来定义插槽。当父组件使用子组件时,可以在子组件标签内部插入内容,这些内容将被渲染到标签所在的位置。

    示例代码

    
    <template>
      <div>
        <h3>子组件标题h3>
        <slot>slot> 
      div>
    template>
    
    
    <template>
      <div>
        <child-component>
          <p>这是插入到子组件插槽中的内容p>
        child-component>
      div>
    template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
           
      components: {
           
        'child-component': ChildComponent
      }
    }
    script>
    
  2. 后备内容

    如果没有向插槽提供内容,可以指定后备内容(默认内容),这些内容将在插槽为空时显示。

    示例代码

    
                        

你可能感兴趣的:(Vue2,学习笔记,学习,笔记,前端)