Question

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

但是当要传递的变量在父级中更改时，此更改未反映在子组件中，下面是我的代码

<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”。如何将“已检查”属性绑定到“ allSelected”变量的值。我进行了广泛的搜索，但找不到类似的内容。请帮忙。

Answer 1

使用以下技术：

var total = query.OrderBy(d => d.Id).Count()

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

vuejs插槽无法响应从父级传递的动态数据

1 个答案: