vue3接收props传递的函数不生效

最新推荐文章于 2025-06-12 11:26:36 发布

做一只快乐的咸鱼

最新推荐文章于 2025-06-12 11:26:36 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/melissaomy/article/details/128783683

<template >
  <div class="xtx-confirm" :class="{ fade }">
    <div class="wrapper" :class="{ fade }">
      <div class="header">
        <h3>{{title}}</h3>
        <a @click="cancel" class="iconfont icon-close-new"></a>
      </div>
      <div class="body">
        <i  class="iconfont icon-warning"></i>
        <span>{{ text }}</span>
      </div>
      <div class="footer">
        <XtxButton size="mini" type="gray" @click="cancelCallBack()">取消</XtxButton>
        <XtxButton size="mini" type="primary" @click="submitCallBack()">确认</XtxButton>
      </div>
    </div>
  </div>
</template>


<!-- //当前组件不是在APP下进行渲染，无法使用APP下的环境（全局组件，全局指令，原型属性函数） -->
<script>
import XtxButton from './xtx-box.vue'
import { onMounted,ref } from 'vue'
export default {
  name: 'XtxConfirm',
  components:{XtxButton},
  props: {
    title: {
      type: String,
      default: '温馨提示'
    },
    text: {
      type: String,
      default: ''
    },
    cancelCallBack: {
      type: Function
    },
    submitCallBack: {
      type: Function
    },
  setup(props){
    const fade = ref(false)
    const submit=()=>{
      props.submitCallBack()
    }
    const cancel =()=>{
      props.cancelCallBack()
    }
    onMounted(()=>{
      setTimeout(() => {
        fade.value =true
      }, 0);
    })
 
    return { fade,submit,cancel }
  }
}
}
</script>

使用cancel函数再调用props中的cancelCallBack()不生效，

@click="cancelCallBack() @click="submitCallBack()"却生效了