菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-陈旭辉-20230621 [打印本页]

作者: 陌殇 时间: 2023-6-25 18:36
标题: 前端-陈旭辉-20230621
一、学习内容

1、vue组件

组件（component）是 Vue.js 最强大的功能之一。

Vue 中的组件化开发就是把网页的重复代码抽取出来，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。

2、vue组件构成

组件就是对局部视图的封装，每个组件包含了

HTML 结构
CSS 样式
JavaScript 行为
data 数据
methods 行为
Vue 中的组件思想借鉴于 React
目前主流的前端框架：Angular、React 、Vue 都是组件化开发思想

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。

有两种组件的注册类型：全局注册和局部注册

3、组件命名

可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式

但 DOM 中只能使用横线分隔方式进行引用组件

建议使用驼峰方式，适用性更强，DOM中使用组件时要转换成短横线方式。

4、父子组件

在一个组件中又定义了其它组件就是父子组件

其实局部组件就是最简单的父子组件, 因为我们说过可以把Vue实例看做是一个大组件

我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件

4.1、如何定义其他父子组件

前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components

所以我们也可以在自定义组件中再定义其它组件

4.2、父子组件数据传递

在Vue中子组件是不能访问父组件的数据的,

如果子组件想要访问父组件的数据, 必须通过父组件传递

如何传递数据

props注意点：props 只用于父组件向子组件传递数据（单向）。

只有在props中声明的变量子组件才能使用。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)