12、VUE中的组件基础
2022-04-01 12:35:56 1 举报AI智能生成
vue
作者其他创作
大纲/内容
定义
不论是vue还是react，我们后期开发都是基于组件化开发的
VUE中
组件是可复用的 Vue 实例，且带有一个名字
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
特点
每一个组件就是一个自定义标签
可复用
方便维护
方便拆分
每个组件作用域隔离（互不干扰）
有完整的生命周期
有自己的响应式数据和各种方法（事件）
......
组件优点
1. 基于组件开发，我们提取公共的组件（封装）
有助于实现代码或者组件的复用
方便项目快速开发
而且能够构建敏捷化开发平台
2. 方便团队协作开发
拆分：单独开发 单独维护
3. 在vue中每一个组件都是一个独立的个体
A：都是一个单独的实例
B：都有自己的DATA/METHODS/生命周期等
两种命名规范
kebab-case 模式
特点
当使用 kebab-case 定义一个组件时，在引用这个自定义元素时只能还用这种方式调用。
例如
base-info
调用
<base-info></base-info>
PasalCase 模式
特点
当使用 PascalCase (首字母大写命名) 定义一个组件时，在引用这个自定义元素时两种命名法都可以使用。
页面在VUE中渲染的时候，所有组件大写的名字都会变为小写
例如
BaseInfo
调用
<baseinfo></baseinfo>
<base-info></base-info>
注意
组件名设置为 kabab-case 模式 或者 PasalCase 模式，在new Vue渲染的视图中都只能用 <base-info></base-info> 这种方式调取
（主要原因是 new Vue 视图渲染的时候，会把所有大写字母转换为小写）
（主要原因是 new Vue 视图渲染的时候，会把所有大写字母转换为小写）
在其它的 template 语法中，基于 <BtnList></BtnList> 或者 <btn-list></btn-list> 都可以正常的调用
（只有在new Vue基于el指定的视图中，才只能用<btn-list></btn-list> 这种模式）
（只有在new Vue基于el指定的视图中，才只能用<btn-list></btn-list> 这种模式）
两种注册方案
注册特点
1、基于 TEMPLATE 指定组件渲染的视图
只能有一个根元素
模板字符串方式
写在组件中的
template 标记方式
写在结构中，组件中直接调取ID名即可
2、指定响应的数据(data 必须是一个函数)
为了保证每个组件中的DATA是独立的，需要让每个组件的DATA是一个闭包函数
只有这样最后把N多组件放在一起渲染，相互之间的DATA才不会冲突的
data:function(){...} => data(){...}
return 的对象中包含指定的响应数据
注意
因为每一个组件都是一个单独的可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项
例如： data、computed、watch、methods 以及生命周期钩子等。
除了是像 el 这样根实例特有的选项。
全局注册组件
特点
创建组件后直接在页面中调取使用即可
语法
Vue.components([name],[options])
name
是组件的名字
options
是组件的配置项
注意
全局注册的组件可以相互调用
局部注册组件
特点
需要在页面渲染的时候（new Vue）基于 components 注册一下才能使用
语法
const [name]=[options];
name
是组件的名字
options
是组件的配置项
注意
局部注册的组件在其子组件中不可用
注意
在VUE视图中调用组件需要采用双闭合的方式，因为单闭合的方式调用，会导致下面的代码不再进行渲染 <base-info/>
0 条评论
下一页
