vue的作用域插槽用法

作用域插槽，当初为了学这个在网上搜了半天，但大多都是一些很模糊的概念，看了半天都不知道它究竟是何方神圣。现如今对它的感触很深，所以来分享一下我对作用域插槽的理解。首先官方给出的定义是这样的：

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。 要做到这一点，我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

用通俗的话来讲就是在父组件可以通过它来拿到子组件的数据，并且通过子组件绑定数据传递给父组件。

接下来看看它是如何使用的吧

<!-- 我是子组件 -->
<template>
  <div>
      <!-- 这是一个具名插槽,name=sun是这个插槽的名字 -->
      <slot name="sun" :data="data"></slot>
  </div>
</template>

<script>
// import Vue from 'vue';

export default {
  data() {
    return {
      data:'我是子组件的数据'
    };
  }
};
</script>

如果想要用到子组件的数据并展示的话,就可以使用作用域插槽了 首先得在子组件的slot中如同使用prop传值一样,绑定需要传递的数据,然后在父组件中使用v-slot去获取传过来的数据并结构。

<template>
     <!-- sun就是插槽的名字 -->
     <!-- {data}是用结构的方式来获取的 -->
    <Sun v-slot:sun="{data}">{{data}}</Sun>
</template>

<script>
    import Sun from './Sun.vue'
    export default {
        name:'Father',
        components:{
          Sun
        }
    }
</script>

这样就能在父组件中获取子组件的内容了