vue 开发系列(十) VUE 作用域插槽

使用场景

官方解释，有时让插槽内容能够访问子组件中才有的数据是很有用的。比如我们在使用ant-design-vue 的表格控件时。

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

这里从控件传递数据到父组件，我们在使用组件的时候，可以根据我们的需要显示需要的效果，表格控件并不需要关心如何实现数据的展示。

我们怎么理解这个作用域插槽呢？

下面我们举一个简单的例子还说明这个问题。

 

实现过程

编写子组件

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

<script>
export default {
    name:"child",
    data(){
      return {
        user: ['张三','李四',"王五"],
        account:"ray"
      }
    }
}
</script>

这里有两个知识点。

1.具名插槽

2.传递数据

把帐号和记录数据传递出去。

父组件代码

<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>

在这里例子中我展示了两种写法：

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

这种写法 其实不推荐使用的，这个在2.6之后是需要废弃的。

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

推荐写法使用 v-slot 指令来实现。

 

 最终显示效果其实是一样的。