zoukankan      html  css  js  c++  java
  • slot的用法(Vue插槽)

    slot 的用法

    本博客中,子组件是son.vue ,父组件是father.vue

    ======================================================================================

    demo1: 不使用slot(插槽),父组件只会显示子组件的内容

    // 子组件

    <template>
      <div class="about">我是子组件about</div>
    </template>

    <script>
    export default {
      name: 'about',
    }
    </script>

    <style scoped>
    .about {
      color: red;
    }
    </style>
     
     
    // 父组件
    <template>
      <div class="father">
          <son>
            <h2>科比</h2>    //  不会 有h2 dom 结构(此时页面不会显示 科比)
          </son>
      </div>
    </template>
     
     

    <script>
    // 1.引入子组件
    import Son from "./common/son.vue"
    export default {
      // 2.注册一下
      components:{
        Son
      }

    }
    </script>

    <style>

    </style>
     
     ======================================================================================
    demo2: 子组件里面使用 slot(一个slot),在父组件里面会显示子组件 slot 里面的内容(前提是:父组件里面没有插入内容)
     
    // 子组件
    <template>
      <div class="about">
        我是子组件about
        <slot> 父组件没有数据就显示我啦</slot>
      </div>
      
    </template>

    <script>
    export default {
      name: 'about',
    }
    </script>

    <style scoped>
    .about {
      color: red;
    }
    </style>
     
    // 父组件
    <template>
      <div class="father">
          <son>
            <!-- 此时:父组件里面没有数据 -->   // 会显示   子组件slot 里面的  内容
          </son>
      </div>
    </template>
     

    <script>
    // 1.引入子组件
    import Son from "./common/son.vue"
    export default {
      // 2.注册一下
      components:{
        Son
      }

    }
    </script>

    <style>

    </style>
     
     ======================================================================================
    demo3: 父组件插入内容  会覆盖子组件 <slot></slot>  里面的内容
    // 子组件 
    <template>
      <div class="about">
        我是子组件about
        <slot> 父组件没有数据就显示我啦</slot>
      </div>
      
    </template>

    <script>
    export default {
      name: 'about',
    }
    </script>

    <style scoped>
    .about {
      color: red;
    }
    </style>
     
    //  父组件
    <template>
      <div class="father">
          <son>
          覆盖子组件slot里面内容
          </son>
      </div>
    </template>
     
     

    <script>
    // 1.引入子组件
    import Son from "./common/son.vue"
    export default {
      // 2.注册一下
      components:{
        Son
      }

    }
    </script>

    <style>

    </style>
     
    ======================================================================================
    demo4:多个插槽也叫做具名插从;通过子组件的 多个 <slot></slot> 不同 name属性 插入到指定位置   
    // 子组件
    <template>
      <div class="about">
        我是子组件about
        <slot name="slot1">1</slot>
        <slot name="slot2">2</slot>
      </div>
      
    </template>

    <script>
    export default {
      name: 'about',
    }
    </script>

    <style scoped>
    .about {
      color: red;
    }
    </style>
     
    <template>
      <div class="father">
          <son>
            <div slot="slot2">覆盖子组件slot里面内容1</div>
            <div slot="slot1">覆盖子组件slot里面内容2</div>
          </son>
      </div>
    </template>

    <script>
    // 1.引入子组件
    import Son from "./common/son.vue"
    export default {
      // 2.注册一下
      components:{
        Son
      }

    }
    </script>

    <style>

    </style>
     
     
  • 相关阅读:
    jmeter录制rabbitmq消息-性能测试
    plsqll连接Oracle的两种方式
    Badboy录制脚本时,提示脚本错误的解决方法
    Decorator
    PyObject and PyTypeObject
    Python LEGB (Local, Enclosing, Global, Build in) 规则
    Python Namespace
    Method Resolve Order (MRO)
    Source Code Structure
    Bound Method and Unbound Method
  • 原文地址:https://www.cnblogs.com/KoBe-bk/p/14091413.html
Copyright © 2011-2022 走看看