组件导出

在组件化开发中，导出机制决定了组件可以向外部暴露哪些能力，以及这些能力应当以何种形式被消费。合理的导出设计不仅能提升组件的复用性和可维护性，也能有效约束内部实现细节，避免不必要的耦合。通过本节内容，你将了解 Qingkuai 组件文件中的导出规则与常见实践，帮助你在封装能力与对外可用性之间取得平衡。

定义及使用

在组件文件的嵌入脚本块中，可以像普通 JS/TS 模块一样使用 export 语句来导出变量、函数或类等：

        
            qk
        
        <lang-js>
    export function exportedFunction() {
        console.log("This function is exported")
    }

    export const exportedValue = "This value is exported"
</lang-js>

组件文件经编译器处理后是一个默认导出的函数，而 export 语句会被挂载到组件实例上。因此在访问组件导出的成员时，不能像访问普通模块成员那样直接使用 import 语句，而是需要通过组件实例来访问：

js
ts

            qk
        
        <lang-js>
    import Child from "./Child.qk"
    import { onAfterMount } from "qingkuai"

    let child = null

    onAfterMount(() => {
        console.log(child.exportedValue) // logs: This value is exported
        child.exportedFunction() // logs: This function is exported
    })
</lang-js>

<Child &handle={child} />
    
            qk
        
        <lang-js>
    import type { ComponentInstance } from "qingkuai"

    import Child from "./Child.qk"
    import { onAfterMount } from "qingkuai"

    let child: ComponentInstance<typeof Child> | null = null

    onAfterMount(() => {
        console.log(child.exportedValue) // logs: This value is exported
        child.exportedFunction() // logs: This function is exported
    })
</lang-js>

<Child &handle={child} />

语法局限性

由于组件文件的导出会被挂载到组件实例上，因此组件文件中的导出语句存在一些局限性，仅支持 导出声明 和 导出列表 两种形式的导出语句：

        
            qk
        
        <lang-js>
    // 支持导出声明
    export const someValue = "This value is exported"

    // 支持导出列表
    const someFunction = () => {
        console.log("This function is exported")
    }
    export { someFunction }
</lang-js>

不支持 导出默认值 、 再导出 以及 类型导出 等其他形式的导出语句：

        
            qk
        
        <lang-ts>
    // 不支持导出默认值
    export default function defaultExportedFunction() {}

    // 不支持再导出
    export { someFunction } from "./someModule"

    // 不支持类型导出
    export type { SomeType } from "./someModule"
</lang-ts>

在github上编辑此页面