【uni-app】自定义组件和通信

(1)自定义组件概念

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

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

导入 import xxx from 'xxx'

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

使用 <xx />

(2)父子组件通信

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

(3)slot 数据分发与作用域插槽

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

(4)全局事件定义及通信

  1. 在整个应用的任何地方均可以使用uni.$on创建一个全局事件
  2. 在整个应用的任何地方也均可以使用 uni.$emit 来触发全局事件,实现多组件见的数据通信
相关推荐
山河木马9 分钟前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林81827 分钟前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
kyriewen3 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git
SmartBoyW4 小时前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
咪库咪库咪5 小时前
vue3-组件
vue.js
用户852495071845 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
10share5 小时前
100行代码 模拟实现Vue 响应式系统
前端·vue.js
Heo5 小时前
Vite进阶用法详解
前端·javascript·面试
铁皮饭盒6 小时前
Next.js 风格路由内置?Bun FileSystemRouter 凭啥这么香
javascript
小林ixn7 小时前
别再背八股了!从 5 个真实场景彻底搞懂 JavaScript 的 this
javascript