vue Render scopedSlots

render 中 slot 的一般默认使用方式如下： this.$slots.default 对用 template的<slot>的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。

在render函数中动态使用多个slot，并且给slot传值

一、我的业务逻辑：

      使用了三个组件，

       组件A调用组件B，组件B调用组件C，组件C是自己封装的render渲染组件。

       组件A希望将自己自定义的插槽插到C组件，C组件渲染出自定义的内容，并且将C组件的值传递给B组件和A组件，B组件是对C组件进行更大一层的封装

     A组件调用B组件

<index-grid>
          <div
            slot="name"
            slot-scope="field"
            class="check-link"
            @click="rowLinkClick"
          >
            <span>{{ field.field.rowData.name }}</span>
          </div>
</index-grid>

A组件引用B组件，slot-scope接收从B组件中传出来solt的值，slot=“name”,是为插槽具名；

B组件中调用C组件的render函数

<sub-grid ref="indexGridSub">
      <span
        v-for="(item, index) in fields"
        :key="index"
        slot="name"
        slot-scope="field"
      >
        <slot name="name" :field="field"></slot>
      </span>

    </sub-grid>

B组件span中 slot是动态的值，和A组件中的slot同一个值，才能接受来自A组件自定义的插槽，

field是来自于C组件中传递的值

C组件是render函数

h(
          "td",
          {
            style: { width: field.width + "px" },
            class: { borderRight },
            // 作用域插槽格式
            // { name: props => VNode | Array<VNode> }
            scopedSlots: this.$scopedSlots.name,
            // 如果组件是其他组件的子组件，需为插槽指定名称
            slot: 'name'
          },
          this.$scopedSlots.name({
            field: field,
            rowData: rowData,
          })
        );

C组件往上传递的值就是{field：'', rowData: ''}的对象

欢迎关注我的个人技术公众号！javascript艺术