如何影响插槽 vuejs 中的组件？

Question

我有一个组件，其中有 2 个通过 <slot> 插入的按钮和复选框。单击组件中的按钮时如何更改复选框的属性？

Checkbox.vue：

<template lang="pug">
    .field
        label.checkbox(:class="'checkbox_'+badge")
            input(type="checkbox" :checked="checked")
            span(v-if="title") {{ title }} <small v-if="summ">{{ summ }}</small>
</template>

<script>
export default {
    name: "checkbox",
    props: {
        title: {
            type: String
        },
        summ: {
            type: String
        },
        checked: {
            type: Boolean
        }
    }
}
</script>

CheckboxGroup.vue：

<template lang="pug">
    .checkboxgroup
        slot
        button Check all
        button Reset all
</template>

<script>
export default {
    name: "checkboxgroup"
}
</script>

用法：

checkboxgroup(checkall="true" dropall="true")
   checkbox(title="200 мм" summ="2" checked style="badge")
   checkbox(title="300 мм" summ="4" checked style="badge")
   checkbox(title="400 мм" summ="5" checked style="badge")
   checkbox(title="500 мм" summ="6" checked style="badge")
   checkbox(title="600 мм" summ="7" checked style="badge")
   checkbox(title="900 мм" summ="8" checked style="badge")

Answer 1

您可以使用scoped slot 将数据传递给插槽子级。

1. 在父组件中，定义一个名为“allChecked”的布尔标志。还要定义切换标志 (toggleAllChecked()) 和重置标志 (resetAllChecked()) 的方法：

export default {
  name: "checkboxgroup",
  data() {
    return {
      allChecked: null
    }
  },
  methods: {
    toggleAllChecked() {
      this.allChecked = !this.allChecked
    },
    resetAllChecked() {
      this.allChecked = false
    }
  }
}

1. 在父组件的模板中，将allChecked绑定到<slot>，方法为按钮click-handlers：

<template lang="pug">
    .checkboxgroup
        slot(v-bind:allChecked="allChecked")
        button(@click="toggleAllChecked") Check all
        button(@click="resetAllChecked") Reset all
</template>

1. 在应用组件中，您可以通过槽作用域（即checkboxgroup(v-slot="{ allChecked }")）使用checkboxgroup 的allChecked 标志：

<template lang="pug">
    checkboxgroup(v-slot="{ allChecked }")
        checkbox(title="200 мм" summ="2" v-bind:checked="allChecked" style="badge")
        checkbox(title="300 мм" summ="4" v-bind:checked="allChecked" style="badge")
        checkbox(title="400 мм" summ="5" v-bind:checked="allChecked" style="badge")
        checkbox(title="500 мм" summ="6" v-bind:checked="allChecked" style="badge")
        checkbox(title="600 мм" summ="7" v-bind:checked="allChecked" style="badge")
        checkbox(title="900 мм" summ="8" v-bind:checked="allChecked" style="badge")
</template>

demo