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

Question

I am passing a variable (from parent component) to slot of a child component. During initial rendering this variable get correctly displayed.

But when the variable being passed changes in parent, this change is not reflected in child component, below is my code

<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>
 ....

The variable is "allSelected". How can I bind the "checked" attribute to the value of "allSelected" variable. I have searched extensively but couldn't find anything similar. Please help.

Answer 1

Use the following technique:

<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>