vuejs 插槽对从父级传递的动态数据没有反应答案

【问题标题】：vuejs slot are not reactive to dynamic data being passed from parentvuejs 插槽对从父级传递的动态数据没有反应
【发布时间】：2020-05-14 14:09:50
【问题描述】：

我正在将一个变量（从父组件）传递到子组件的插槽。在初始渲染期间，此变量会正确显示。

但是当被传递的变量在父组件中发生变化时，这种变化不会反映在子组件中，下面是我的代码

<template>
  <div>
    <v-client-table
     :columns="columns"
     v-model="data"
     :options="options"
     :class="{ 'ready' : isReady }"
    >
    <div slot="h__select">
      <input type="checkbox" @change="selectAll($event)" 
      :checked="allSelected" />
    </div>
 ....

变量是“allSelected”。如何将“checked”属性绑定到“allSelected”变量的值。我进行了广泛的搜索，但找不到类似的东西。请帮忙。

【问题讨论】：

如果allSelected是这个模板中的一个prop，那么当提供这个prop的父组件改变值时，它会被Vue自动更新。
@IVO GELOV 我尝试通过将 :allSelected="allSelected" 传递给 v-client-table 组件并在
，还是不行

标签： javascript vue.js vuejs2

【解决方案1】：

使用以下技术：

<template>
<!-- This is the higher-order component V-CLIENT-TABLE -->
  <table>
    <thead>
      <tr>
        <th>
          <slot name="h__select" :allSelected="all" />
        </th>
        <!-- Produce the header here -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in items" :key="index">
        <slot :item="item" />
      </tr>
    </tbody>
  </table>
</template>

<script>
export default
{
  name: 'VClientTable',
  props:
  {
    items:
    {
      type: Array,
      default: () => []
    },
    columns:
    {
      type: Array,
      default: () => []
    },
  },
  data()
  {
    return {
      all: false,
    };
  },
  watch:
  {
    all(newValue, oldValue)
    {
      // update checkboxes for all rows
    }
  }
}
</script>

<template>
<!-- This is the component where you use V-CLIENT-TABLE -->
  <div>
    <v-client-table
     :columns="columns"
     v-model="data"
     :options="options"
     :class="{ 'ready' : isReady }"
    >
    <div slot="h__select" slot-scope="data">
      <input type="checkbox" @change="data.allSelected = !data.allSelected" 
      :checked="data.allSelected" />
    </div>
  </div>
</template>

<script>
export default
{
  name: 'ChildComponent',
}
</script>

【讨论】：