插槽的基本使用（作用域插槽）

父组建在调用子组建时想要使用子组建的数据

1.slot.vue

<template>
  <div>
  //这里将obj赋值给row
    <slot :row="obj">
        <h1>作用域插槽后备内容</h1>
    </slot>
  </div>
</template>

<script>
export default {
    data(){
        return{
            obj:{
                name:'xujiang',
                age:18
            }
        }
    }
}
</script>

<style>

</style>

2.App.vue

调用子组建

<template>
  <div id="app">
    <slot-zyy>
      <!-- <template v-slot="abc"> -->
            <!-- <P>姓名 {{abc.row.name}}</P>-->
        <!-- <P>年龄 {{abc.row.age}}</P>-->
        <!-- 第一种写法   这里通过解构出row -->
      <!-- <template v-slot={row}>
        <P>姓名 {{row.name}}</P>
        <P>年龄 {{row.age}}</P>
      </template> -->
      <!-- 第二种写法 -->
      <template slot-scope={row}>
        <P>姓名 {{row.name}}</P>
        <P>年龄 {{row.age}}</P>
      </template>
    </slot-zyy>
  </div>
</template>

<script>
import slotZyy from './components/slot.vue'
export default {
  name: 'App',
  components: {
    slotZyy
  }
}
</script>

<style>
</style>