vue.js 如何发出取消选中复选框的事件

34gzjxbg  于 2023-03-03  发布在  Vue.js
关注(0)|答案(2)|浏览(147)

我是$emit概念的新手。我尝试了下面的一些方法,但它不起作用。当我按下按钮时,我想向SelectComponent发出一个事件,以取消选中当前选中的所有复选框。我该如何做?
App.vue:

<button @click="$emit('UncheckCheckbox')">Uncheck all boxes!</button>
<div v-for="d in myArray">
  <SelectComponent />
</div>

SelectComponent.vue:

<template>
      <input type="checkbox"/>
</template>

<script lang="ts" setup>    
const emit = defineEmits<{
  (event: 'UncheckCheckbox'): void;
}>();

const UncheckCheckbox = ((event: Event) => {
  if ((event.target as HTMLInputElement).checked) {
    (event.target as HTMLInputElement).checked = false;
  }
})
oknwwptz

oknwwptz1#

请,看看下面的片段(不需要发射只是使用 prop ):

const { ref, nextTick } = Vue
const app = Vue.createApp({
  setup() {
    const stat = ref(null)
    const myArray = [1,2,3]
    const uncheck = () => {
      stat.value = false
      nextTick(() => stat.value = null)
    }
    return { stat, myArray, uncheck }
  },
})
app.component('child', {
  template: `
    <input type="checkbox" :checked="status" />
  `,
  props: ['status'],
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="uncheck">Uncheck all boxes!</button>
  <div v-for="d in myArray">
    <child :status="stat"></child>
  </div>
</div>
cxfofazt

cxfofazt2#

要向多个兄弟组件发出事件,需要将eventbus注册为全局属性。

const emitter = mitt();
app.config.globalProperties.emitter = emitter;

按钮

<script>
export default {
  methods: {
    click() {
      this.emitter.emit('UncheckCheckbox')
    }
  }
}
</script>

选择组件

<script>
export default {
  created() {
    this.emitter.on('UncheckCheckbox', () => {
      //uncheck your checkbox
    })
  }
}
</script>

使用全局事件总线,你可以在任何地方发射/监听事件。
但我认为这并不是一个好的做法,控制所有的复选框更符合数据视图的概念。

<button @click="uncheckAll">Uncheck all boxes!</button>
<div v-for="d in myArray">
  <SelectComponent :checked="d.checked" />
</div>

<script setup>
const myArray = reactive(new Array(10).fill(0).map({ checked: true }))
const uncheckAll = () => {
  myArray.forEach(d => d.checked = false)
}
</script>

选择组件

<template>
  <input type="checkbox" :checked="checked" @change="emit('change', $event.target.checked)"/>
</template>
<script setup>
const props = defineProps<{
  checked: boolean
}>()
const emit = defineEmits<{
  (e: 'change', checked: boolean): void
}>()
</script>
const { createApp, reactive } = Vue

const app = createApp({
  template: `
    <div style="display: flex;justify-content: space-around;">
      <span><EventDemo /></span>
      <span><VMDemo /></span>
    </div>
  `
})
app.config.globalProperties.emitter = mitt()

app.component('EventDemo', {
  template: `
    <h2>Event Demo</h2>
    <button @click="toggleAll">Toggle All</button>
    <div v-for="d in 10"><EventCheck />{{ d }}</div>
  `,
  methods: {
    toggleAll() {
      this.emitter.emit('checkAll')
    }
  }
})
app.component('EventCheck', {
  template: `<input type="checkbox" :checked="checked" />`,
  data: () => ({ checked: true }),
  created() {
    this.emitter.on('checkAll', () => {
      this.checked = !this.checked
    })
  }
})

app.component('VMDemo', {
  template: `
    <h2>VM Demo</h2>
    <button @click="toggleAll">Toggle All</button>
    <div v-for="(d, idx) in myArray"><VMCheck :checked="d.checked" />{{ idx + 1 }}</div>
  `,
  setup() {
    const myArray = reactive(new Array(10).fill(0).map(d => ({ checked: true })))
    const toggleAll = () => myArray.forEach(d => d.checked = !d.checked)
    return { myArray, toggleAll }
  }
})
app.component('VMCheck', {
  template: `<input type="checkbox" :checked="checked" />`,
  props: ['checked']
})

app.mount('#app')
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app"></div>

相关问题