2020.10.27陈悦玲

插槽

什么是插槽slot?

  1. 插槽(slot)是vue提出来的一个概念,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显示不显示、怎样显示都是由父组件进行控制的,而插槽在哪里显示就由子组件来进行控制

  2. 分类

    1. 默认插槽
      提示:通过slot在子组件中为将要设置的内容占位,在父组件中调用子组件的时候,在子组件的内容,向子组件传递slot占位的内容,slot所在的位置就是父组件要显示的内容

          //父组件:
              <div id ="#app">
      <子组件>
      <p>我的世界</p>
      </子组件>
      </div>
      //子组件
      <子组件>
      <slot></slot>
      </子组件>
    2. 插槽的默认内容
      在这里插入图片描述
      在这里插入图片描述

    3. 具名插槽
      <slot name ="插槽的名字"></slot>
      提示:默认插槽在传递多个信息的时候已经不能满足用户的需求,于是,通过name属性,我们可以为每个slot起一个名字,通过名字来传递我们想要传递的内容,若没有设置名字,则传递默认插槽的值

              //父组件:
                          <div id ="#app">
      <子组件>
      <p slot="name1">传输内容1</p> //slot与下面的相互对应
      <p slot="name2">传输内容2</p>
      </子组件>
      </div>
      //子组件
      <子组件>
      <slot name=“name1“></slot>
      <slot name=“name2“></slot>
      </子组件>

    在这里插入图片描述在这里插入图片描述

    1. 作用域插槽
      slot-scope:父组件可以获取子组件中携带的数据

      //父组件:
              <div id ="#app">
      <子组件>
      <template slot-scope="接收子组件传递过来的数据的变量名">
      <p>{{变量名}}</p>
      </template>
      </子组件>
      </div>
      //子组件
      <子组件>
      <slot :传递给父组件的变量名=“变量名”></slot>
      </子组件>
      1. v-slot
        提示:在vue2.6版本开始,使用v-slot 代替 slot 和 slot-scope ,slot 和 slot-scope已经废弃,暂时仍旧可以使用(vue3的语法 就用v-slot)

        //父组件:
            <div id ="#app">
        <子组件>
        <template v-slot=“传递的名字”>
        //slot 的传递内容
        {{传递的名字}}
        </template>
        </子组件>
        </div>
        //子组件
        <子组件>
        <slot name="传递的名字"></slot>
        </子组件>

标签

评论

this is is footer