Vue 插槽 slot 传值失效问题

问题

今天工作时遇到一个奇怪的问题，我使用插槽进行传值，在父组件收不到子组件传过来的值，找了好久，最后发现竟然是版本问题，给大家分享一下！

一开始我是使用这种方式进行接收的：

父组件：

   <TestPage v-slot="{ data }"> <span @click="hanldeSlot(data)">哈哈哈</span></TestPage>

    hanldeSlot(data) {
      console.log('data: ', data)
    },

子组件：

<slot data="子组件传的值"></slot>

我在我的测试电脑上运行：

是没问题的，可以实现，但是为什么我的工作代码就是不行了，这个时候我进入了官方文档一看究竟！ 

官网是这么说的：https://v2.cn.vuejs.org/v2/api/#vm-slots

注意：v-slot:foo 在 2.6 以上的版本才支持。对于之前的版本，你可以使用废弃了的语法。

我又一看我的工作时的 vue 版本是  "vue-template-compiler": "^2.5.11"

测试电脑的版本是  "vue-template-compiler": "^2.6.14"

然后我就去看了废弃了的语法

解决

可以看到只有在2.6.0才可以使用v-slot，那我的低版本只能使用slot-scope="slotProps"，最后我怀着激动的心情试了一下，果不其然成功了！如果大家遇到相同的问题，不妨试试看看是不是版本问题。

      <template slot-scope="{ data }">
        <div>
          <span @click="handleData(data)"></span >
        </div>
      </template>