vue3 使用 defineEmits 报错:emit is not a function

最新推荐文章于 2023-09-11 20:30:46 发布

原创最新推荐文章于 2023-09-11 20:30:46 发布 · 6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

文章讲述了在Vue3.x中使用`setup`脚本块时，如何正确处理props和emit的问题，以及为何在`setup`中使用`defineEmits`可以避免emit为null的情况。

示例代码块如下：

export default {
  name: 'modal-button',
  props:{
    isShow:{
      type:Boolean,
      default:false
    },
  },
  setup(props) {
    // const modalOpen = ref(false);
    const {isShow} = toRefs(props)
    console.log('isShow',isShow.value)
    const emit = defineEmits(['closeTeleport'])
    console.log('emit',emit)	// null
    const closeTeleportButton = () => {
      // modalOpen.vlaue = false;
      console.log('子组件closeTeleport')
      emit('closeTeleport',false)
    }
    return {
      // modalOpen,
      isShow,
      closeTeleportButton
    }
  }
}

emit打印出来为null

解决办法，改为setup script代码块即可

<script setup lang="ts">

import {defineEmits, toRefs} from 'vue'

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  },
})
const {isShow} = toRefs(props)
console.log('isShow', isShow)
const emit = defineEmits(['closeTeleport'])
console.log('emit', emit)
const closeTeleportButton = () => {
  // modalOpen.vlaue = false;
  console.log('子组件closeTeleport')
  emit('closeTeleport', false)
}

</script>