vue插槽子组件（添加数据）、父组件（获取数据）使用方式

最新推荐文章于 2024-06-01 16:31:18 发布

琹箐

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量427

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45327886/article/details/138969537

版权

tiips:如嫌繁琐，直接移步总结即可！

一、使用方式

注：数据：item:{ "label": "检查设备", "value": "急救设备、生命支持类设备、急救设备、呼吸机、诊断设备", "slot": "test" }

子组件：

          <slot :name="item.slot" :data1="{}" :data2="item">
             {{ item.value || '- -' }}
          </slot>

父组件:

方式一：

        <template #test="data">
           {{data}}
        </template>

方式二：（同方式一：赋值解构出插槽上的属性）

        <template #test="{data1,data2}">
           {{data1}}==={{data2}}
        </template>

方式三：

        <template :slot="'test'" slot-scope="data">
           {{data}}
        </template>

方式四：（同方式三：赋值解构出插槽上的属性)

        <template :slot="'test'" slot-scope="{data2,data1}">
           {{data1}}==={{data2}}
        </template>

1.子组件 <slot :name="slotname" :data1="{}" :data2="item"><slot>

name:插槽名称; data1,data2: 子组件携带的数据属性

2.父组件

a. <template #slotname="{data1,data2}"></template>

b.<template :slot="slotname" slot-scope="{data1,data2}" ></template>

注：slot-scope 无论用方式三，还是方式四 =后面都是接字符串呀！！！，所以不能写 " :slot-scope"， :slot-scope=" 'data ' " :slot-scope="{data1,data2}"等都是错误的写法

3.为什么用插槽，什么时候使用插槽？

子组件在某个地方有通用的页面渲染逻辑，但是另外一个业务中有特殊的ui需求，父组件希望自定义子组件的相应位置的渲染逻辑。

4.诶，每次都以为我记住了，一到使用的时候还是会想不起来或者自以为写对了结果一直报错。记录一下，不会就拿出来看一看！！！

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

关注