Mixed usage method of Vue named slot + scope slot

In the project of vue + elementui, form components are dynamically encapsulated through the data returned by the backend.

Some of these scenes:

1. Some drop-down boxes are linked. For example, after selecting a value in the previous drop-down box, the next drop-down box will load data based on the value selected by the previous drop-down box;

2. Some input boxes are followed by a graphic operation, etc.

The above requirements require slots.

Here we will only briefly introduce the named slot + scoped slot method to use it together.

The code encapsulated in the component is (note the writing method in slot):

<template v-if="">
    <el-form-item
        :label=""
        :disabled=" == 0"
        :prop=""
    >
        <slot
            :name=""
            v-bind="{ item, formResult }"
        ></slot>
    </el-form-item>
</template>

annotation:

:name="" in slot is the use of a named slot, and v-bind="{ item, formResult }" is the data of the child component passed to the parent component.

When the parent component is referenced:

<mulForms>
  <template v-slot:framesystem="{item,formResult}">
    <div class="form-item">
     <span>{{}}</span>
    </div>
  </template>
  <template v-slot:computesign="{item,formResult}">
    <div class="form-item">
      <span>item:{{}}</span>
    </div>
  </template>
</mulForms>

annotation:

The framesystem in v-slot:framesystem="{item,formResult}" is name, and the following {item,formResult} is the data returned by the component to the parent component.

Summarize:

1. What the vue official website says is not very clear. The return data such as v-bind="{ item, formResult }" in the component has not been found in the official website, but it is still a reference to other people's writing method.

2. When referring to a component, the writing method of v-slot:computesign="{item,formResult}" in the parent component. Computesign is the name value in the form component, and the following { item, formResult } is the data returned by the form component received by the parent component. That's how to use the name + scope slot

This is the end of this article about the mixing use of Vue named slots + scoped slots. For more related vue slot content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!