vue.js - vue components传值，在组件里页面使用 slot-scope，scope.row，报错？

Question

      <rightColumn        :urlParams="urlParams"        :equipmentList="equipmentList"        :pipeDiameterLenghList="pipeDiameterLenghList"        :unitList="unitList"        :systemWarningInfo="systemWarningInfo"        :modelTabsName="rightColumnTabsName"        :pipeLenghHighDiffList="pipeLenghHighDiffList"        :equipAttrubute="equipAttrubute"      ></rightColumn>

vue3的版本我用的vue2写法，我在1个components里传了多个值，在rightColumn页面使用 slot-scope，

报错信息：Property "scope" was accessed during render but is not defined on instance.

很多警告信息：Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

            <el-table :data="pipeLenghHighDiffList" style="width: 100%">              <!-- 检查项prop="checkItem" -->              <el-table-column                                :label="`${$t('glsj.checkItem')}`"              >                <template slot-scope="scope">                  <span>{{ scope.row.checkItem }}</span>                </template>              </el-table-column>

我尝试只传1个值，使用slot-scope="scope"，取值scope.row，也报错。

<rightColumn        :pipeLenghHighDiffList="pipeLenghHighDiffList"      ></rightColumn>

Answer 1

Vue 3 还有 slot-scope 这个属性？不是从 Vue 2.6 开始不就已经废弃了吗？只不过还是可以用。
你如果说要在 Vue 3 中用作用域插槽就改用 v-slot 就好了呀。

作用域插槽 - 插槽 Slots | Vue.js
#slot-scope 废弃 | API — Vue.js

Answer 2

这个问题涉及到Vue.js组件之间的数据传递和作用域。

首先，关于报错信息：TypeError: Cannot read properties of undefined (reading 'row')，这个错误通常发生在尝试访问未定义对象的属性时。在你的代码中，你尝试访问scope.row.checkItem，如果scope.row是未定义的，那么就会抛出这个错误。

其次，关于Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. 这个警告信息通常表示在Vue的调度器刷新过程中发生了未处理的错误。这可能是由于Vue内部的一个bug，但也可能与你的代码有关。

解决方案：

1. 检查传入的参数：确保你传递给rightColumn组件的所有属性（如pipeLenghHighDiffList）都是有效的，并且没有缺失任何必要的值。
2. 使用v-slot替代slot-scope：在Vue 2中，你可以使用slot-scope来获取作用域插槽的数据。但在Vue 3中，slot-scope已被废弃，取而代之的是使用v-slot指令。你可以尝试将slot-scope="scope"替换为v-slot="scope"。
3. 检查数据类型：确保你传递的数据类型是正确的。例如，如果pipeLenghHighDiffList是一个数组，那么在模板中你应该直接使用scope.row.checkItem而不是通过模板字符串。
4. 检查el-table-column的属性：确保你正确使用了el-table-column的属性。在你的代码中，你使用了:label="${$t('glsj.checkItem')}"，这里使用了模板字符串和变量插值。确保你正确使用了变量插值语法。
5. 检查组件之间的数据传递：如果你尝试传递多个值并且遇到问题，考虑将这些值包装在一个对象中，然后传递该对象。这样可以避免混淆每个值的来源和用途。

示例代码：

<template>  <right-column :data="myData"></right-column></template><script>export default {  data() {    return {      myData: {        pipeLenghHighDiffList: [/* your data here */],        // other properties...      }    };  }};</script>

在rightColumn组件中：

<template>  <el-table :data="pipeLenghHighDiffList" style="width: 100%">    <el-table-column label="$t('glsj.checkItem')">      <template v-slot="scope">        <span>{{ scope.row.checkItem }}</span>      </template>    </el-table-column>    <!-- other columns... -->  </el-table></template>

请根据你的具体情况调整代码，并确保所有组件都已正确定义和导入。希望这可以帮助解决你的问题！如果还有其他问题，请随时提问。