day3
Vue 组件
定义Vue组件
什么是组件:
组件的出现, 就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能, 将来需要什么功能, 直接调用对应的组件即可.
模块化和组件化概念的解读
- 什么是模块化：
是从代码的角度分析问题；把可复用的代码，抽离为单独的模块；- CommonJS 模块化规范；
- 模块化的好处：提高了代码的复用率，提供模块作用域的概念，防止全局变量污染；方便了程序员之间 代码互相调用；
- 什么是组件化：组件化是从
页面UI的角度进行分析问题的；把页面中可复用的UI结构，抽离为单独的组件；- 组件化的好处：方便了 UI 结构的重用；随着项目开发的深入，手中可用的组件会越来越多；
elementUI
- 组件化的好处：方便了 UI 结构的重用；随着项目开发的深入，手中可用的组件会越来越多；
定义全局组件
- 定义组件的语法
Vue.component('组件的名称', { 组件的配置对象 })
- 使用组件的语法
- 把
组件的名称, 以标签的形式，引入到页面上就行；
- 把
注意： 从更抽象的角度来说，每个组件，就相当于是一个自定义的元素；
注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
定义私有组件(父子组件)
components
组件中定义data数据、methods方法以及生命周期函数
组件和实例的相同和区别：
- 组件中的 data 必须是一个 function 并 return 一个 对象；在 Vue 实例中，实例的 data 既可以是 对象，也可以是 方法；
- 组件中，通过 template 属性来指定组件的UI结构；在 Vue 实例中，通过 el 属性来指定实例控制的区域；但是实例也可以使用
template; - 组件和实例，都有自己的
生命周期函数，私有的过滤器，methods处理函数；
为什么组件中的data属性必须定义为一个方法并返回一个对象
- 通过计数器案例演示
总结： 因为这样，能够保证每次创建的组件实例，都有自己的一块唯一的数据内存(对象)，防止组件之间数据的干扰；
使用 <component>标签实现组件切换
-
<component>是Vue提供的；作用是 把 is 指定的 组件名称，渲染到<component>内部 - 身上有一个 :is属性
多个组件切换 -- 应用动画 和 mode 方式
<transition mode= 'out-in'>
<component :is='conName'></component>
</transition>
组件传值
父传子 props-down
组件中的props 中的数据, 都是通过父组件传递给子组件中的
props 中的数据, 都是只读的 data 是可读可写的
传递方法: 使用的是 事件绑定机制 v-on 通过 this.$emit('fun',参数,...) 这个参数可以传递给父组件 相当于传值给父组件
子传父
- 通过 this.$emit()
