Vue组件学习

逃离我推掉我的手 2022-05-21 01:38 233阅读 0赞

# 知识要点(基础) #

*  Vue实例以及Component注册都是通过选项完成的
 *  props 表示是你可以在组件上注册的一些自定义特性，组件实例上的一个属性
 *  使用v-bind来动态渲染内容
 *  每个组件模板都需要一个根元素
 *  通过事件来向父级组件发消息,触发:emit(‘event′\[,arg\]),监听:v−on:event使用事件抛出一个值，可以用  e m i t ( ‘ e v e n t ′ \[ , a r g \] ) , 监 听 : v − o n : e v e n t 使 用 事 件 抛 出 一 个 值 ， 可 以 用 event访问，如果父组件的监听函数是一个方法，则作为第一个参数传入,如上arg,注意这是用在组件上，例如原生input是$event.target.value
 *  和HTML文件一样，需要向一个组件传递内容,可以使用slot

# 组件进阶 #

## 组件注册 ##

*  组件命名是需要小写加连字符，直接在DOM中使用，kebab-case
 *  pascalCase在单文件中可以使用
 *  局部注册是通过Vue实例选项进行注册的
 *  模块系统import/require
 *  学习webpack后记得回来理解基础组件的自动化全局注册(\*)

## props ##

*  HTML中的特性名是不区分大小写的，意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
 *  静态传递props,动态传递(使用v-bind:),传数字、bool值、数组以及对象的时候需要动态传递
 *  单向数据流：初始值使用data, prop需要转化是使用computed
 *  prop验证：类型检查、默认值、必须值
 *  注意非prop特性会添加到这个组件的根元素上，当不希望添加到根元素上时可以声明inheritAttrs:false
 *  外部传入特性会替代内部特性，而class,style比较智能，会合并
 *  $attrs允许你在使用基础组件的时候更像是使用原始的 HTML 元素，而不会担心哪个元素是真正的根元素

## 自定义事件 ##

*  推荐使用kebab-case事件名
 *  自定义组件的v-model语法糖
 *  通过listener将事件监听器指向子元素，  l i s t e n e r 将 事 件 监 听 器 指 向 子 元 素 ， listener包含了作用于该组件的所有监听器
 *  object.assign(target, …sources)将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
 *  .sync修饰符，突破单向数据流，用于对一个prop进行“双向绑定”

## 插槽 ##

*  将元素作为承载分发内容的出口，没有传入元素将会被抛弃
 *  子组件， 父组件
 *  作用域插槽，解构slot-scope

## 动态组件&异步组件 ##

*  动态组件为防止Vue每次都新建一个Component实例，可以用包裹起来
 *  异步组件，(resolve, reject) , promise, 还可以返回一个对象处理加载状态

## 边界情况 ##

特殊情况，先暂时不学习