Vue 3 发射道具

Question

我试图在VUE 3中传递一个emit prop，每次传递它时我仍然得到错误，并且prop无法切换。

手风琴.vue

 <template>
    <div class="flex" @click="toggleInfo()">
        <slot></slot>
    </div>
 </template
    <script>
    export default {
      props: {
        value: {
          required: true
        }
      },
      setup(props, { emit }) {
        const toggleInfo = () => {
          emit('input', !props.value)
        }
        return {
          toggleInfo
        }
      }
    }
    </script>

应用程序.vue

<accordion v-model:value="isOpen">
    ...// just data
</accordion>

<script>
import { ref } from 'vue'
import accordion from '../components/Accordion.vue'

export default {
  components: {
    accordion
  },
  setup() {
    const isOpen = ref(false)
    return {
      isOpen
    }
  }
}
</script>

每次我点击toggleInfo，我仍然得到：

false

我的发射不起作用。

Answer 1

v-modelVue 3 中的接线发生了变化：

\n

\n
• 组件的 prop 名称\n
  \n
  • 视图2：value
  \n
  • 视图3：modelValue
  \n
  \n
\n
• 组件发出的事件名称\n
  \n
  • 视图2：input
  \n
  • 视图3：update:modelValue
  \n
  \n
\n

\n

由于从value技术上讲是自定义v-model道具名称，因此您必须调整发出的事件名称以匹配：

\n

// emit(\'input\', !props.value) \xe2\x9d\x8c wrong event name\nemit(\'update:value\', !props.value)\n

\n

演示

\n