将父组件的数据传输到子组件（元素 UI，Vue.js）的正确方法？答案

【问题标题】：Right way to transfer parent component's data to the child one (Element UI, Vue.js)?将父组件的数据传输到子组件（元素 UI，Vue.js）的正确方法？
【发布时间】：2026-02-04 13:50:01
【问题描述】：

我正在使用 Element UI，有一个 el-switch 组件（如复选框），我不明白如何在内部其他组件 (el-table - > el-column -> el-switch).

代码如下：

var Main = {
  data() {
    return {
      tableData: [
        {
          category: 'Ticket',
          panelNotification: {
            check: true,
            name: 'category1'
          },
          slackNotification: {
            check: true,
            name: 'panel1'
          },
          button: {
            name: 'slack1',
            value: 'slackValue1'
          }
        }, {
          category: 'Self ticket',
          panelNotification: {
            check: false,
            name: 'category2'
          },
          slackNotification: {
            check: true,
            name: 'panel2'
          },
          button: {
            name: 'slack2',
            value: 'slackValue2'
          }
        }, {
          category: 'Important ticket',
          panelNotification: {
            check: true,
            name: 'category3'
          },
          slackNotification: {
            check: true,
            name: 'panel3'
          },
          button: {
            name: 'slack3',
            value: 'slackValue3'
          }
        }
      ]
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@1.4.3/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.3/lib/index.js"></script>

<div id="app">

  <el-table :data="tableData">
    <el-table-column
      prop="category"
      label="category"
      width="180">
    </el-table-column>
    <el-table-column
      prop="panelNotification"
      label="panel notification"
      width="200">
      <template scope="scope">
        <el-switch
          v-model="scope.row.check"
          on-color="#13ce66"
          off-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="slackNotification"
      label="slack notification"
      width="200">
      <template scope="scope">
        <el-switch
          v-model="scope.row.check"
          on-color="#13ce66"
          off-color="#ff4949"
          >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="button"
      width="120">
      <template scope="scope">
        <el-button>Save</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>

现在的问题是单击开关不起作用，直到您调整窗口大小（奇怪????）。由于某种原因，单击会切换行中的两个开关..

我很困惑。只想在牢房里装个开关，但不知道怎么做。

我将非常感谢任何帮助。

【问题讨论】：

标签： vue.js element vue-component v-model

【解决方案1】：

您正在绑定到scope.row.check，但由于row.check 不存在，Vue 无法识别它已更改。

然而，row.check 正在被创建，并且调整窗口大小显然会触发重新渲染，迫使 Vue 查看scope.row.check。这就是您看到这种情况发生的原因。

您需要分别绑定到scope.row.panelNotification.check 和scope.row.slackNotification.check。

Here's a working fiddle.

【讨论】：