网站首页 > 教程文章 正文
简单需求:封装一个导航组件,在页面引入,导航标题由父组件传递过去,子组件通过properties来接收,点击当前标题添加上类名,最后渲染到页面中。
效果图如下:
父组件:引入组件,在页面使用组件。
子组件:通过通过properties来接受父组件传递过来的值,绑定点击事件,通过传递event事件对象来获取索性和值(通过data-xx来进行传递),在控制台打印出
event.currentTarget.dataset.xx来获取传递的值。
**总结如下**:
**1.父组件传递给子组件的参数通过properties来接受;**
**2.子组件传递给父组件的参数通过事件this.triggerEvent(“事件名”,{});**
**3.修改data里面的数据必须通过this.setData({})来进行修改**
猜你喜欢
- 2025-10-13 Vue el-element ui 清空表格选中记录
- 2025-10-13 Vue3基础难点总结_vue3 从入门到实战 进阶式掌握完整知识体系
- 2025-10-13 Vue深入组件:组件事件详解1_组件使用vuex
- 2025-10-13 分享 15 个 Vue3 全家桶开发的避坑经验
- 2025-10-13 vue 3 学习笔记 (八)——provide 和 inject 用法及原理
- 2025-10-13 vue-element-admin 增删改查(五)_vue element admin 登录修改
- 2025-10-13 微信小程序双向数据绑定,父子传参
- 2025-10-13 Vue3 中有哪些值得深究的知识点?_vue常用知识点
- 2025-10-13 Vue3常用的6种组件通信方式,你一定都用过!
- 2025-10-13 面试官:来说说vue3是怎么处理内置的v-for、v-model等指令?
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)