vue Development Series (X) VUE scope slots

scenes to be used

The official explanation, sometimes leaving the socket to access the contents of subassemblies only data is useful. For example, we use ant-design-vue table control.

 <a-table-column title="注释" dataIndex="comment"  >
                   <template slot-scope="text, record">
                     <rx-textbox v-model="record.comment" ></rx-textbox>
                    </template>
                 </a-table-column>

Here transfer data from the control to the parent component, when we use components, according to our need to show the desired effect, form controls do not need to worry about how to display the data.

How we understand the scope slots it?

Below we give a simple example also illustrates the problem.

 

Implementation process

Write subassembly

<template>
 <div class="child">
    <h3>这里是子组件</h3>
    <slot name="demo" :text="account" :record="user"></slot>
  </div>
</template>

<script>
export default {
    name:"child",
    data(){
      return {
        user:[ 'John Doe', ' John Doe ' , " Wang Wu " ], 
        Account: " ray " 
      } 
    } 
} 
</ Script >

There are two knowledge points.

1. Named Slot

2. Data transfer

The account number and record data transfer out.

Father component code

<template>
  <div class="father">
    <child>
      <template  slot="demo" slot-scope="{text,record}">
       {{text}}
       <div v-for="item in record" :key="item">{{item}}</div>
      </template>
    </child>
     <child>
      <template  v-slot:demo="{text,record}">
       {{text}}
       <div v-for="item in record" :key="item">{{item}}</div>
      </template>
    </child>
  </div>
</template>

<script>
import Vue from 'vue'

import ChildSlot from '@/components/ChildSlot.vue'

Vue.component(ChildSlot.name, ChildSlot);

export default {
  name: 'HelloWorld',
 
}
</script>

Here I show two examples of writing:

slot="demo" slot-scope="{text,record}"

In fact, such an approach is not recommended for use in this abandoned after 2.6 is required.

<template  v-slot:demo="{text,record}">

Recommended wording using v-slot instructions.

 

 The final display is actually the same.