vue教程:作用域插槽

说明

数据在子组件中,但是 显示的方式,是在 父组件的 组件标签 中定义的,相当于:数据从子组件传递到父组件,这种就需要用到 作用域插槽

如下图:左侧是 app.vue,右侧是 组件Article3.vue

应用场景

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>

显示效果如下:


原文出处:https://malaoshi.top/show_1IX3ID0v3Wp8.html