Vue 3 发射道具

Posted 2023-02-22

【中文标题】Vue 3 发射道具

【英文标题】：Vue 3 emit prop

【发布时间】：2021-06-27 08:05:36

【问题描述】：

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

Accordion.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>

App.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

我的发射不工作。

【参考方案1】：

v-model wiring has changed in Vue 3:

组件的道具名称 Vue 2：value Vue 3：modelValue 组件发出的事件名称 Vue 2：input Vue 3：update:modelValue

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

// emit('input', !props.value) ❌ wrong event name
emit('update:value', !props.value)

demo