vue教程：作用域插槽（slot-scope）-马育民老师

# 普通子组件的缺点

普通子组件，是将 **数据显示的方式写死**，父组件使用子组件时，只能传值，**无法改变 子组件 显示数据的方式**

### 提出问题

父组件使用子组件时，不但能传值，**还能改变 子组件 显示数据的方式**

### 解决

使用 **作用域插槽**

# 作用域插槽

**数据在子组件中**，当父组件使用该子组件时，父组件还可以控制数据的显示方式，相当于：数据从子组件传递到父组件，这种就需要用到 **作用域插槽**

如下图：左侧是 `app.vue`，右侧是 组件`Article3.vue`

[![](/upload/0/0/1IX3ICzMuqB6.png)](/upload/0/0/1IX3ICzMuqB6.png)

### 应用场景

element ui 的 [table](https://element.eleme.cn/#/zh-CN/component/table "table") 中的自定义列模板，如下：

[![](/upload/0/0/1IX3IYQjhWG7.png)](/upload/0/0/1IX3IYQjhWG7.png)

### 好处

类似 element-ui 中 table 这种复杂组件，可以在父组件中控制数据的显示方式

# 代码

### Article3.vue

```
<template>
    <div>
        <slot :row="obj"></slot>
    </div>
</template>
<script>
export default {
    data(){
        return {
            obj:{
                name:"百度",
                url:"http://www.baidu.com"
            }
        }
    }
}
</script>
```

### App.vue

```
<template>
  <div id="box">
    <Article3>
      <template slot-scope="scope">
        {{scope}}<br>
        <a :href="scope.row.url">{{scope.row.name}}</a>
      </template>
    </Article3>
  </div>
</template>
<script>
import Article3 from './views/Article3.vue'

export default 
{
  name: 'App',
  components:{
    Article3
  }
}
</script>
```

显示效果如下：

[![](/upload/0/0/1IX3ICsyJSCs.png)](/upload/0/0/1IX3ICsyJSCs.png)

原文出处：http://malaoshi.top/show_1IX3ID0v3Wp8.html