Question

我有一个组件，其中有两个通过<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将数据传递到插槽子级。

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

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

在父组件的模板中，将allChecked绑定到<slot>，并将方法绑定为按钮click-处理程序：

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

在应用程序组件中，您可以在广告位范围（即checkboxgroup）中使用allChecked的{{1}}标志：

checkboxgroup(v-slot="{ allChecked }")

demo

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

1 个答案: