脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uni-app自定义组件

uni-app自定义组件和通信的方式

 更新时间：2024年03月01日 16:54:45   作者：小秀_heo  
组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,组件可以使用全局注册和页面引入两种方式进行使用,对uni-app自定义组件和通信相关知识感兴趣的朋友跟随小编一起看看吧

（1）自定义组件概念

组件是 vue 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升，在项目的component目录下存放组件，uni-app 只支持 vue 单文件组件（.vue 组件）

组件可以使用「全局注册」和「页面引入」两种方式进行使用，使用分为三步：

导入 import xxx from 'xxx'

注册 Vue.use('xx',xx) components:{ xxx }

使用 <xx />

（2）父子组件通信

  • 父组件通过自定义属性向子组件传递数据
  • 子组件通过 props 接收父组件传递的数
  • 父组件通过自定义事件标签向子组件传递事件
  • 子组件通过触发父组件定义事件方式修改父组件数据

（3）slot 数据分发与作用域插槽

  • 父组件通过调用子组件内部嵌套 html 内容作为slot分发给子组件
  • 子组件通过在 slot 标签上添加属性，向父组件通信数据，作用域插槽

（4）全局事件定义及通信

  • 在整个应用的任何地方均可以使用uni.$on创建一个全局事件
  • 在整个应用的任何地方也均可以使用 uni.$emit 来触发全局事件，实现多组件见的数据通信

到此这篇关于uni-app自定义组件和通信的文章就介绍到这了,更多相关uni-app自定义组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论