说明

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

如下图：左侧是 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>

显示效果如下：