带道具的切换按钮并发射

Question

这是我第一次使用道具，我不知道问题出在哪里

我想制作一个切换按钮的组件，然后在任何有输入数据的地方使用它， 但它没有像我预期的那样工作 你能帮我解决这个问题吗？ 这是我的组件：

<template>
  <div>
    <label v-for="(label, option) in options" :key="option">
      <input
        type="radio"
        :value="option"
        :checked="option = value"
        @change="$emit('input', option)"
      />
      <slot :name="option">
      {{ label }}
    </slot>
    </label>
  </div>
</template>
<script>
export default {
  name: 'ToggleSwitch',
  props: {
    value: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      required: true
    }
  }
}
</script>

这是我想使用此按钮的地方：

  <toggle-switch v-model="value" :options="options">
  <template #Single>
  <p>test slot</p>
  </template>
  <template #Subscription>
  <p>test slot2</p>
  </template>
  </toggle-switch>
<script>
import ToggleSwitch from '../components/ToggleSwitch.vue'
export default {
  components: {
    ToggleSwitch,
  },
  data() {
    return {
      value: 'Single',
      users: useUsersListStore(),
    }
  },
  computed: {
    options() {
      return {
        Single: 'ggg',
        Subscription: 'bbb',
      }
    }
  },
</script>

Answer 1

您正在使用“emit”从子组件发出事件，但您的父组件没有监听这些事件。

第一个选项是在使用组件的地方添加监听器。 https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events

第二个选项是在父组件和子组件之间使用双向数据绑定。 https://vuejs.org/guide/components/v-model.html