Vue组件学习

知识要点(基础)

• Vue实例以及Component注册都是通过选项完成的
• props 表示是你可以在组件上注册的一些自定义特性，组件实例上的一个属性
• 使用v-bind来动态渲染内容
• 每个组件模板都需要一个根元素
• 通过事件来向父级组件发消息,触发:$emit(‘event’[,arg]), 监听:v-on:event 使用事件抛出一个值，可以用$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将事件监听器指向子元素，$listener包含了作用于该组件的所有监听器
• object.assign(target, …sources)将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
• .sync修饰符，突破单向数据流，用于对一个prop进行“双向绑定”

插槽

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

动态组件&异步组件

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

边界情况

特殊情况，先暂时不学习