Vue - day3

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()