vue-learning:24 - component - 目录
component 组件
- 组件的概念
Vue 组件同时也都是 Vue 实例,可接受相同的选项对象option
(除了一些根级特有的选项) 和使用相同的生命周期钩子,以及模板调用方式。 - 组件的构建和注册
- 构建:
com = Vue.extend(option)
- 注册:
- 全局注册:
Vue.component('my-com', com)
- 局部注册:
vm.components: {'my-com': com}
- 全局注册:
- 语法糖:
Vue.component('my-com',option)
vm.components('my-com': option)
- 组件命名规范
- 构建:
组件三大API:
prop
/event
/slot
prop- 字符串数组形式:
props: ['prop1', 'prop2', ...]
- 对象形式:
js props: {prop1: Number} props: { prop1: { type: [Number, String], required: true, default: 100, //当默认值是对象或数组时,必须从函数返回值获取 () => { return value } validator: (value) => { // do somethings return Boolean return result } } }
- prop的命名规范
- 动态prop(除字符串外,其它类型传入都需要使用动态prop,即v-bind绑定)
- 单向数据流和prop实现双向绑定.sync修饰符
- 非prop特性
- 被替换或合并
- 禁用继承
inheritAttr: false
$attr
event
v-on / $on
监听事件$once
一次性事件$emit
触发事件$off
卸载事件监听$listeners
v-on绑定监听器集合(除原生监听事件).native
原生事件修饰符.sync
双向绑定修饰符model
属性
slot
- 普通插槽
html <slot></slot>
- 插槽提供默认值
html <slot>default content</slot>
- 具名插槽
html <slot name="someName"></slot> <!-- 组件调用 --> <my-com> <template v-slot:somName></template> <my-com>
- 作用域插槽
html <slot :prop="value"></slot> <!--组件调用 --> <my-com> <template v-slot='childValue'>{{ cilidValue.value}}</template> </my-com>
- 独占默认插槽的写法
html <some-component v-slot="childValue"> {{ childValue.value }}</some-component> <some-component v-slot:default="childValue"> {{ childValue.value }}</some-component>
- 解构插槽prop
html <my-com v-slot="{value}">{{ value }}</my-com> <!-- 重命名 --> <my-com v-slot="{value: otherName}">{{ otherName }}</my-com> <!-- 重命名并提供默认值 --> <my-com v-slot="{value: {otherName: defaultValue}}">{{ otherName }}</my-com>
- 动态插槽名
html <my-com> <template v-slot:[dynamicSlotName]></template> </my-com>
v-slot
的简写#
html <my-com> <template #somName></template> <my-com>
- 模板编译作用域
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
- 字符串数组形式:
- 组件依赖注入
provide
inject
- 组件实例的引用
ref / $refs
$root
$parent
$children
自定义扩展方法
- 组件间的通信
- 父子组件通信
prop / $emit
- 嵌套组件
$attrs
/$liteners
- 后代组件通信
provide / inject
- 组件实例引用
$root
/$parent
/$children
/$refs
- 事件总线
const Bus = new Vue()
- 状态管理器
Vuex
- 父子组件通信
- 动态组件
<component is="com-name"></component>
- 异步组件
function
内置组件
transiton
/keep-alive
/component
- 其它
- 组件的递归调用
- 组件的循环引用
v-once
创建静态组件
vue-learning:24 - component - 目录的更多相关文章
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue中的项目目录assets和staitc的区别
vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...
- 第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue Login Form Component
Vue Login Form Component Account Login <template> <div> <slot></slot> <el ...
- Vue Learning Paths
Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
- 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的
如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...
- vue源码分析—Vue.js 源码目录设计
Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...
- vue项目开发基本目录结构
§ 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...
随机推荐
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结 本系列文章中可能有很多翻译有问题或者错误的地方:并且有些章节 ...
- python 利用csv模块导入数据
- 洛谷4178 BZOJ1468 Tree题解点分治
点分治的入门练习. 题目链接 BZOJ的链接(权限题) 关于点分治的思想我就不再重复了,这里重点说一下如何判重. 我们来看上图,假设我们去除了1节点,求出d[2]=1,d[3]=d[4]=2 假设k为 ...
- jquery解析XML文件实现的省市联动
XML我是直接在网上下载的文件包 拿过来用的 jquery我用的是3.1的 前台页面 <form action="buy.html" method="get&quo ...
- poj 2342 hdu 1520【树形dp】
poj 2342 给出每个顶点的happy值,还有若干组两个顶点L,K关系,表示K是L的上司.求当K.L不同时出现时获得的happy值的最大和. 设dp[u][0]表示不选u结点时获得的最大值,dp[ ...
- maven修改版本号
1.修改版本 mvn versions:set -DnewVersion=xxx 2.回滚版本,提交后不能回滚 mvn versions:revert 3.提交版本变更 mvn versions:co ...
- Redis源码解析:07压缩列表
压缩列表(ziplist)是列表键和哈希键的底层实现之一.当列表键只包含少量列表项,并且每个列表项要么是小整数值,要么是长度较短的字符串时:或者当哈希键只包含少量键值对,并且每个键值对的键和值要么是小 ...
- Android Http实现文件的上传和下载
最近做一个项目,其中涉及到文件的上传和下载功能,大家都知道,这个功能实现其实已经烂大街了,遂.直接从网上荡了一堆代码用,结果,发现网上的代码真是良莠不齐,不是写的不全面,就是有问题,于是自己重新整理了 ...
- C# Find vs FirstOrDefault
本文告诉大家,在获得数组第一个元素时,使用哪个方法性能更高. 需要知道,两个方法都是 Linq 的方法,使用之前需要引用 Linq .对于 List 等都是继承可枚举Enumerable这时获取第一个 ...
- http://www.freeopensourcesoftware.org
Applications http://www.freeopensourcesoftware.org/index.php?title=Applications Main Page > Thi ...