【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 来触发全局事件,实现多组件见的数据通信
相关推荐
志尊宝5 分钟前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
ym hyd 11119 分钟前
慢性病精细化管理平台源码 Java+SpringBoot+Vue3 前后分离
java·vue.js·spring boot·毕设
wangyadong31729 分钟前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js
Hilaku1 小时前
为什么前端应该主动去学数据库?
前端·javascript·程序员
朱 欢 庆1 小时前
el-table 表格组件二次封装
javascript·vue.js·elementui
+VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue外卖点餐系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
FYKJ_20103 小时前
springboot刑事案件管理系统03047-计算机课程设计、毕业设计
vue.js·spring boot·python·mysql·typescript·spark·django
怕浪猫3 小时前
分享一个做视频的skill,这条白板视频,每一笔都是代码画的
前端·javascript·面试
無名路人5 小时前
小程序点餐页吸顶滚动之分类按需加载,上划切换
前端·vue.js·微信小程序
OpsEye7 小时前
当企业不再只关心能不能调用模型,而是关心值不值得调用
javascript·ai编程