vue 插槽

Posted 2023-06-08 webHYT

1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通信方式，适用于父组件==》子组件

2、分类：默认插槽、具名插槽、作用域插槽

3、使用方式：

（1）、默认插槽

父组件中：
    <Category>
      <div>html结构 </div>
    </Category>

子组件中：
    <template>
      <div>
        <!-- 定义插槽 -->
        <slot>插槽默认内容...</slot>  
      </div>
    </template>

（2）、具名插槽

父组件中：
    <Category>
      <!-- 写法一 -->
      <template slot="center">
        <div>html结构 </div>
      </template>
     
       <!-- 写法二 -->
      <template v-slot:footer>
        <div>html结构 </div>
      </template>
    </Category>

    子组件中：
    <template>
      <div>
        <!-- 定义插槽 -->
        <slot name="center">插槽默认内容...</slot>  
        <slot name="footer">插槽默认内容...</slot>  
      </div>
    </template>

3、作用域插槽

（1）理解：数据在组件自身，但是根据数据生成的结构需要组件使用者来决定。（games数据在Category组件中，但是使用数据所遍历出来的结构由App组件决定，比如：elementUI的表格scope）

（2）具体编码：

 父组件中：
    <Category>
      <template scope="scopeData">
        <ul>
          <li v-for="g in scopeData.games" :key="g"> g </li>
        </ul>
      </template>
    </Category>

    <Category>
      <template slot-scope="scopeData">
        <h4 v-for="g in scopeData.games" :key="g"> g </h4>
      </template>
    </Category>

    子组件中：
    <template>
      <div>
        <!-- 定义插槽 games是子组件data中的数据-->
        <slot :games="games">插槽默认内容...</slot>  
      </div>
    </template>

 

vue 2.6 插槽更新 v-slot 用法总结

参考技术A 引vue官方文档
之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~

我的理解就是
父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置
(匿名插槽,具名插槽)

插槽一共就三大类
1.匿名插槽(也叫默认插槽): 没有命名,有且只有一个
2.具名插槽: 相对匿名插槽组件slot标签带name命名的
3.作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

用法:我的理解,匿名插糟只需要一个.(就是这些,不太复杂)
父页面:

子组件 todoList.vue

用法:我的理解,和匿名插槽比较,就是必须起名todo对应,可以有多个具名插槽.(没了~)
父页面

子组件

对 v-slot:todo 做操作:

匿名如果想用必须加上default

1.重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据
父页面

子组件

父页面 (子组件不变 显示一样)

参数值替换名字(可以后看)

独占默认插槽缩写(可以后看)
感觉没什么机会用,限制条件太多

在用上v-slot之后 只需要考虑好
1.是否需要命名(匿名插槽,具名插槽)
2.父页面是否需要取存在子页面的数据(作用域插槽)

可以试一下,便于理解~
父页面

子组件