component 组件

  1. 组件的概念
    Vue 组件同时也都是 Vue 实例,可接受相同的选项对象option (除了一些根级特有的选项) 和使用相同的生命周期钩子,以及模板调用方式。
  2. 组件的构建和注册
    • 构建:com = Vue.extend(option)
    • 注册:
      • 全局注册:Vue.component('my-com', com)
      • 局部注册:vm.components: {'my-com': com}
    • 语法糖: Vue.component('my-com',option) vm.components('my-com': option)
    • 组件命名规范
  3. 组件三大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>
    • 模板编译作用域
      父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
  4. 组件依赖注入
    • provide
    • inject
  5. 组件实例的引用
    • ref / $refs
    • $root
    • $parent
    • $children
    • 自定义扩展方法
  6. 组件间的通信
    • 父子组件通信 prop / $emit
    • 嵌套组件 $attrs / $liteners
    • 后代组件通信 provide / inject
    • 组件实例引用 $root / $parent / $children / $refs
    • 事件总线 const Bus = new Vue()
    • 状态管理器 Vuex
  7. 动态组件<component is="com-name"></component>
  8. 异步组件function
  9. 内置组件transiton / keep-alive / component

  10. 其它
    • 组件的递归调用
    • 组件的循环引用
    • v-once创建静态组件

vue-learning:24 - component - 目录的更多相关文章

  1. vue中extend/component/mixins/extends的区别

    vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸

  2. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  3. 第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. Vue Login Form Component

    Vue Login Form Component Account Login <template> <div> <slot></slot> <el ...

  5. Vue Learning Paths

    Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...

  6. vue 组件复用 - component

    vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...

  7. 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  8. vue源码分析—Vue.js 源码目录设计

    Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...

  9. vue项目开发基本目录结构

    § 目录结构 . ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── src/ # 源码目录(开发都在这里进行) │ ├── ass ...

随机推荐

  1. WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中)

    原文:WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中) 通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过 ...

  2. bzoj1231 混乱的奶牛

    Description 混乱的奶牛 [Don Piele, 2007] Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S ...

  3. iOS学习系列 - 扩展机制category与associative

    iOS学习系列 - 扩展机制category与associative category与associative作为objective-c的扩展机制的两个特性,category即类型,可以通过它来扩展方 ...

  4. mysqldump导出表结构或者表数据

    加-d参数代表只导表结构,不加此参数则代表导出结构以及表数据,> 代表录入某一文件,若为>>则表示将内容追加到某文件末尾. -- 导出数据库为dbname的表结构 mysqldump ...

  5. 服务网关zuul----zuul中的动态刷新路由配置

    Spring Cloud实战小贴士:Zuul处理Cookie和重定向 所以解决该问题的思路也很简单,我们只需要通过设置sensitiveHeaders即可,设置方法分为两种: 全局设置: zuul.s ...

  6. Docker初步了解 2016-10-30 20:46 279人阅读 评论(31) 收藏

    什么是docker? Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器. Docker本质上是一种软件,让用户创建镜像(很像虚拟机的模板),并且随后在容器里 ...

  7. tensorflow兼容处理 tensorflow.compat.v1

    https://www.wandouip.com/t5i183316/ 引言 原来引用过一个段子,这里还要再引用一次.是关于苹果的.大意是,苹果发布了新的开发语言Swift,有非常多优秀的特征,于是很 ...

  8. Java练习 SDUT-1131_最大公约数与最小公倍数

    C/C++训练1---最大公约数与最小公倍数 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入两个正整数,求它们的最 ...

  9. 9-1进程,进程池和socketserver

    一 进程: # 什么是进程 : 运行中的程序,计算机中最小的资源分配单位# 程序开始执行就会产生一个主进程# python中主进程里面启动一个进程 —— 子进程# 同时主进程也被称为父进程# 父子进程 ...

  10. 13-4 jquery操作标签(文本,属性,class,value)

    一 文本操作 $().html() $().text() 文本赋值操作 $().html("") $().text("") 二 属性操作 $().attr(属性 ...