VUE 报Warning:the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope

最新推荐文章于 2024-05-07 16:07:50 发布

原创最新推荐文章于 2024-05-07 16:07:50 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue中关于scoped slots的警告问题，详细解析了报错信息，指出由于Vue 2.5以后scope被slot-scope取代，提出了解决此类警告的方法。

具体报错信息

Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.

原因

      <template slot="$expand" scope="scope">
        {{ `My name is ${scope.row.name},
        this rowIndex is ${scope.rowIndex}.`
        }}
      </template>
      <template slot="likes" scope="scope">
        {{ scope.row.likes.join(',') }}
      </template>

scope在vue 2.5之后被slot-scope替换掉了，因此需要更改成slot-scope

解决办法

	  <template slot="$expand" slot-scope="scope">
        {{ `My name is ${scope.row.name},
        this rowIndex is ${scope.rowIndex}.`
        }}
      </template>
      <template slot="likes" slot-scope="scope">
        {{ scope.row.likes.join(',') }}
      </template>