纷享销客开发者手册 纷享销客开发者手册
  • APL开发手册
  • PWC开发手册
  • OpenAPI 文档
  • 自定义组件(PC端)
  • 自定义组件(小程序)
  • 自定义插件(PC端)
  • 自定义插件(小程序)
  • 第三方集成插件(H5)
  • API(PC端)
  • API(小程序)
  • Fx DevTools
更新日志
  • 简体中文
  • English
  • 自定义组件(PC端)
  • 自定义组件(小程序)
  • 自定义插件(PC端)
  • 自定义插件(小程序)
  • 第三方集成插件(H5)
  • API(PC端)
  • API(小程序)
  • Fx DevTools
更新日志
  • 简体中文
  • English
  • 入门

    • 什么是自定义组件
    • 开发第一个自定义组件
    • 使用场景
    • 多文件的自定义组件
      • 案例:某个自定义组件,有如下几个文件
    • 自定义组件使用静态资源
    • FxUI使用
  • 组件

  • 示例

  • 常见问题

目录

多文件的自定义组件

# 多文件的自定义组件

对于比较复杂的自定义组件,UI-PaaS支持将其拆分为多个文件来实现,以便让代码结构更加清晰合理

# 案例:某个自定义组件,有如下几个文件

  • secondComponent.vue(入口)
  • subComponent.vue
  • helper.js

代码:secondComponent.vue

<template>
    <div style="width: 100%;">
        Hello: {{myName}}
        <subComponent></subComponent>
    </div>
</template>
<script>
import subComponent from './subComponent';
import helper from './helper';
export default {
    components: {
        subComponent
    },
    data() {
        return {
            myName: "Developer"
        }
    }
}
</script>

代码:subComponent.vue

<template>
    <div style="width: 100%;">
        Hello: subComponent
    </div>
</template>
<script>
export default {
}
</script>

代码:helper.js

export default {
    formatData() {
        return {};
    }
}
使用场景
自定义组件使用静态资源

← 使用场景 自定义组件使用静态资源→

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式