vue深入组件

一、组件注册

1.组件在使用之前需要被注册，有两种注册方式：全局注册和局部注册。

2.全局注册

使用vue 应用实例的app.componet方法，让组件在此应用的任意组件的模版中使用。

3.局部注册

全局注册存在一定的问题：

全局注册中没有被使用的组件无法在生产打包时被自动移除

使得大型项目中使用项目的依赖不那么明确，可能会影响应用长期的可维护性

局部注册的组件需要在使用它的父组件中显示导入，并且只能在该父组件中使用，能使组件之间依赖关系更明确，对打包时的自动移除也更友好。

在父组件中使用components。对于domponents对象里面的属性，key是注册的组件名，值是相应组件的实现。

4.组件名格式

使用PascalCase格式（dom模版内不可用）

二、props

和透传属性的区别：props是 需要定义的，使用对象形式进行声明时，需要声明类型，父组件向子组件传递的props，子组件可以在根元素和根元素内的元素中使用props，而透传的属性不需要定义，当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。

1.声明

使用字符串数组或者对象。对象中key值是名称，value是预期类型的构造函数。

2.静态和动态props

//静态

//动态通过v-bind绑定，部分js表达式常量也要通过v-bind绑定

当想要将一个对象的所有属性当作props传入，可以使用没用参数的v-bind:object name

3.数据流向：单向

props因父组件的更新而变化，将新状态向下流往子组件，而不会逆向传递。

父组件更新后，所有子组件的props都会被更新到最新值，不应该在子组件去更改一个prop，大多数情况下，子组件应该抛出一个事件来通知父组件来做出改变

三、组合事件

1.触发与监听事件

在组件的模板表达式中，可以直接使用 $emit方法触发自定义事件this.$emit(‘时间名’)

父组件可以通过 v-on (缩写为 @) 来监听事件 @事件名=‘绑定的方法’