Examples of v slot and slot slot scope replacing each other

If the component document uses v-slot and you are using vue before 2.6, you need to replace v-slot: so there are two ways to replace it. Notice how the two v-slot differ, and you will know how to replace v-slot in the document with slot-scope and slot

v-slot Usage 1:

< template v-slot:operate="{ row }" > < template >

You can replace it with:

< template slot="operate" slot-scope="{ row }" > < /template >

v-slot Usage 2:

< template v-slot="{ row }" > < template >

You can replace it with:

< template slot-scope="row" > < /template >

Record the later period and then improve it, and catch up with the project

Supplementary knowledge: V-for and slot-scoped error reporting problem

This scenario is used to dynamically render the slot of the table with v-for

It might be written like this

<a-table>
 <span v-for="(item, index) in header" :key="index" :slot="item.dataIndex" slot-scope="text" >
  {{ text }}
 </span>
</a-table>

However, an error will be reported because v-for and slot-scope are in the same level 1

Ambiguous combined usage of slot-scope and v-for on (v-for takes higher priority). Use a wrapper < template > for the scoped slot to make it clearer.

Prompt to wrap 1 layer outside < template > So you may change it to the following, but you will also report an error

<a-table>
 <template v-for="(item, index) in header" :key="index">
 <span :slot="item.dataIndex" slot-scope="text" >
  {{ text }}
 </span>
 </template>
</a-table>
< template> cannot be keyed. Place the key on real elements instead.

Prompt < template > template can't write key. Even if there is no such error, the table data will not be rendered, because there is no slot in this layer. It should be said that slot should be placed outermost, and at the same time, key should be placed inside

Change to read as follows

<a-table>
 <template v-for="(item, index) in header" :slot="item.dataIndex" slot-scope="text">
 <span :key="index">
  {{ text }}
 </span>
 </template>
</a-table>

Solve the problem above

There is a problem that slot does not render

 <template v-for="(slotname, idx) in ['status', 'sub_account_status']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  <a-tag v-if="text === ' Normal '" color="blue">{{ text }}</a-tag>
  <a-tag v-else color="red">{{ text }}</a-tag>
  </span>
 </template>
 <!--  Package name, associated account number  -->
 <template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  <a-tooltip placement="top" >
  <template slot="title">
  <span v-for="(item, index) in text" :key="index">{{ item }}<br/></span>
  </template>
  <div class="tableHidden">
  <a-tag v-for="(item, index) in text" :key="index">{{ item }} </a-tag>
  </div>
  </a-tooltip>
  </span>
 </template>

It seems that the name of slotname in two v-for= "(slotname, idx)" is one. Yes, it is the temporary variable name, and it is good to modify it into one. Amazing

 <template v-for="(name, idx) in ['status', 'sub_account_status']" :slot="name" slot-scope="text" >
  //  The one above name
  <span :key="idx">
   . . . 
  </span>
 </template>
 <!--  Package name, associated account number  -->
 <template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
   . . . 
  </a-tooltip>
  </span>
 </template>