Vue组件学习
知识要点(基础)
- 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, 还可以返回一个对象处理加载状态
边界情况
特殊情况，先暂时不学习
蔚落
左手的ㄟ右手
还没有评论，来说两句吧...