vue3动态绑定事件

weixin_45631367

于 2023-12-04 15:03:37 发布

阅读量629

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45631367/article/details/134784602

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue3动态绑定事件

<component  v-on="isComponent.event" :is="isComponent.component"></component>

使用v-on进行动态绑定事件

import { shallowRef, ref } from "vue"  //引入shallowRef  ref() 的浅层作用形式。 只有对 .value 的访问是响应式的
//引入组件
import EInvoicingForm from './component/EInvoicingForm.vue'  
import EInvoicingList from './component/EInvoicingList.vue'
import EInvoicingFormInvoiceApplication from './component/EInvoicingFormInvoiceApplication.vue'
const toList = () => {
    isComponent.value = {
        component: EInvoicingList,
        event: {
            'DownloadOrIssue': DownloadOrIssue,
        }
    }
}
const DownloadOrIssue = (val) => {
    if (val == 2) {
        isComponent.value = {
            component: EInvoicingFormInvoiceApplication,
            event: {

            }
        }
    }
}
// ***注意  因为 const 声明 没有变量提升 所以 要把这个详情式对象 放到最后
const isComponent = shallowRef({
    component: EInvoicingForm,
    event: {
        'toList': toList,
    }
})