day3

Vue 组件

定义Vue组件

什么是组件:

组件的出现, 就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能, 将来需要什么功能, 直接调用对应的组件即可.

模块化和组件化概念的解读

• 什么是模块化：是从代码的角度分析问题；把可复用的代码，抽离为单独的模块；
  • CommonJS 模块化规范；
• 模块化的好处：提高了代码的复用率，提供模块作用域的概念，防止全局变量污染；方便了程序员之间 代码互相调用；
• 什么是组件化：组件化是从页面UI的角度进行分析问题的；把页面中可复用的UI结构，抽离为单独的组件；
  • 组件化的好处：方便了 UI 结构的重用；随着项目开发的深入，手中可用的组件会越来越多；elementUI

定义全局组件

1. 定义组件的语法
   • Vue.component('组件的名称', { 组件的配置对象 })
2. 使用组件的语法
   • 把 组件的名称, 以标签的形式，引入到页面上就行；

注意： 从更抽象的角度来说，每个组件，就相当于是一个自定义的元素；

注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

定义私有组件(父子组件)

components

组件中定义data数据、methods方法以及生命周期函数

组件和实例的相同和区别：

1. 组件中的 data 必须是一个 function 并 return 一个 对象；在 Vue 实例中，实例的 data 既可以是 对象，也可以是 方法；
2. 组件中，通过 template 属性来指定组件的UI结构；在 Vue 实例中，通过 el 属性来指定实例控制的区域；但是实例也可以使用 template;
3. 组件和实例，都有自己的生命周期函数，私有的过滤器，methods 处理函数；

为什么组件中的data属性必须定义为一个方法并返回一个对象

1. 通过计数器案例演示

总结： 因为这样，能够保证每次创建的组件实例，都有自己的一块唯一的数据内存(对象)，防止组件之间数据的干扰；

使用 <component>标签实现组件切换

1. <component> 是Vue提供的；作用是 把 is 指定的 组件名称，渲染到 <component> 内部
2. 身上有一个 :is属性

多个组件切换 -- 应用动画 和 mode 方式

<transition mode= 'out-in'>
    <component :is='conName'></component>
</transition>

组件传值

父传子 props-down

• 组件中的props 中的数据, 都是通过父组件传递给子组件中的

• props 中的数据, 都是只读的 data 是可读可写的

传递方法: 使用的是 事件绑定机制 v-on 通过 this.$emit('fun',参数,...) 这个参数可以传递给父组件 相当于传值给父组件

子传父

• 通过 this.$emit()