13-uni-app中组件的创建

uni-app中组件的创建

在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可

  • 创建login组件,在component中创建login目录,然后新建login.vue文件

    <template>
        <view>
            这是一个自定义组件
        </view>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>
    
  • 在其他组件中导入该组件并注册

    import login from "@/components/test/test.vue"
    
  • 注册组件

    components: {test}
    
  • 使用组件

    <test></test>
    
组件的生命周期函数
beforeCreate 在实例初始化之后被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • v-for指令渲染列表 #key 预期:number | string | boolean | symbol ...
    听书先生阅读 6,650评论 0 1
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    Neo_duan阅读 2,187评论 1 1
  • uni-app的基本使用 基础部分: +环境搭建 +页面外观配置 +数据绑定 +uni-app的生命周期 +组件的...
    你的胡霸霸阅读 697评论 0 2
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    卤蛋两枚阅读 3,712评论 0 1
  • #同一个路由下,父向子组件传值 props属性 -- 单向绑定 父组件中给childOne绑定一个自定义静态pro...
    似风的蜗牛阅读 737评论 0 0