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

目录

一、使用方式

二、总结

---

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

/*

希望对你有帮助！

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

*/