526互联

vu3-component动态绑定事件

发布时间 2023-12-04 15:03:08作者: AL^_^

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,
    }
})

------------恢复内容开始------------

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,
    }
})

------------恢复内容结束------------