VUE之组件（复用性、props、单向数据流）

通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动

例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
组件的注册类型分两种：全局注册和局部注册。

组件复用性

可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用

场景：写一个广告组件（包含广告标题、广告词）

如果在模板中这样写，Vue 会显示错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。
解决方案：将模板的内容包裹在一个父元素内，来修复这个问题

即组件模板template的单个根元素限制。

识别组件

识别父组件与子组件：
①在js中创建注册组件的代码被称为“子组件”（组件模板→子组件）
②在HTML文档中引用组件的代码被称为“父组件”（组件引用→父组件）

小结：注册处为子组件、引用处为父组件。

props传值

子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据，props 的值可以是两种，字符串数组或者对象。接下来主要介绍下字符串数组的用法。
案例1：在子组件的友情链接描述里应用了父组件的数据，通过props接收数组格式的数据describtion，并将其渲染到组件模板中。

动态传值：日常开发里，传递的数据并不是直接写死的，而是来自父级的动态数据，使用指令 v-bind来动态绑定 props 值，当父组件的数据变化时，也会传递给子组件

案例2：给文章组件传递一个标题

由于HTML特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转为短横分隔命名 。

注意事项：
1、子组件通过props接收父级组件传递的数据
2、由于HTML特性不区分大小写，当使用 DOM 模板时，驼峰命名的 props 名称要转为短横分隔命名 。
（即HTML中引用是短横分隔命名blog-title，JS的DOM模板里为小驼峰命名blogTitle，两者可以对应识别）

props传值-多个值

在组件的自定义标签上直接写该 props 名称，如果要传递多个数据，在 props 数组中添加项即可。
案例3：文章组件，组件data自带文章主体内容。

案例分析：props 选项传值VS组件自身data函数return数据
①区别：props 来自父级，而 data是子组件自身数据，作用域是组件本身。
②这两种数据都能在模板 template 及计算属性 computed和方法 methods 中使用。

案例4：场景→书籍卖书广告。在典型应用中，可能在 data 里有一个数组，组件通过遍历展示：

案例4：接下来给组件添加方法

可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的

Vue 2.x与Vue 1.x 比较大的改变就是，Vue2.x 通过 props 传递数据是单向的了， 也就父组件数据变化时会传递给子组件，但是反过来不行。
之所以这样设计，是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。

总结

1）组件组织：通常一个应用会以一棵嵌套的组件树的形式来组织，VUE两大核心思想–组件化、数据驱动。
（2）组件复用性：可以将组件进行任意次数的复用
（3）单个根元素限制：every component must have a single root element (每个组件必须只有一个根元素)
（4）识别父组件与子组件：注册处为子组件、引用处为父组件
（5）props传值：通过 Prop 向子组件传递数据，即子组件的数据有时需要从父组件获取调用，此时便可以用props 从父级接收数据