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

组件组织

• 通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动
  
• 例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。
• 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
• 组件的注册类型分两种：全局注册和局部注册。

组件复用性

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

单个根元素限制

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

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

识别组件

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

props传值

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

props-动态传值

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