avatar
文章
68
标签
90
分类
38

首页
置顶
  • Github Hexo
  • Vue
  • Bootstrap
  • Webpack
  • Mina
  • Node
  • 仓库
文章
  • 时间轴
  • 标签
  • 分类
  • 案例
  • 文档
清单
  • 音乐
  • 照片
  • 番剧
  • 说说
留言板
友链
SimpleLife
  • 百宝盒
  • 前端文档
SimpleLife
搜索
首页
置顶
  • Github Hexo
  • Vue
  • Bootstrap
  • Webpack
  • Mina
  • Node
  • 仓库
文章
  • 时间轴
  • 标签
  • 分类
  • 案例
  • 文档
清单
  • 音乐
  • 照片
  • 番剧
  • 说说
留言板
友链
SimpleLife
  • 百宝盒
  • 前端文档

Vue组件化开发

发表于2021-05-28|更新于2021-11-03|VueComponents
|字数总计:211|阅读时长:1分钟|阅读量:

Vue组件的基本使用

学习掌握全局组件和局部组件 Vue组件的基本使用

父组件和子组件的通信

父传子:props基本用法、props数据验证和Data中的数据类型;子传父:`$children`,`$refs` 父子通信

计数器实例

子组件从父组件获取counter数据,子组件有两个button按钮,通过点击事件$emit()向父级传递事件,在父级的methods写方法,来改变counter值 计数器实例

插槽slot

了解插槽Slot的基本使用、学习新概念具名,通过给slot添加值name,指定修改内容、理解插槽作用域:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的 插槽slot

文章作者: SimpleLife
文章链接: http://www.noti.top/2021/05/28/vue-components/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 SimpleLife!
组件
打赏
  • 微信
    微信
  • 支付宝
    支付宝
cover of previous post
上一篇
计数器实例
cover of next post
下一篇
Vue-CLI 脚手架
相关推荐
cover
2021-06-29
组件
cover
2021-06-29
Bootstrap 实例
cover
2021-05-28
计数器实例
avatar
SimpleLife
生活是没有标准的
文章
68
标签
90
分类
38
Follow Me
公告

一个简单的人,过着简单的生活
分享着简单的事,和简单的人

目录
  1. 1. Vue组件的基本使用
  2. 2. 父组件和子组件的通信
  3. 3. 计数器实例
  4. 4. 插槽slot
最新文章
开发环境和生产环境
开发环境和生产环境2021-12-19
Vue + TyperScript
Vue + TyperScript2021-11-17
Vue3快速上手
Vue3快速上手2021-11-14
Git 版本控制
Git 版本控制2021-10-16
javaScript进阶面向对象ES6
javaScript进阶面向对象ES62021-10-12
©2021 By SimpleLife
一个简单的人,做一件简单的事
本地搜索