Vue组件化开发简单总结

原创

已于 2022-03-14 11:06:26 修改 · 置顶 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js #前端

于 2020-11-19 12:08:22 首次发布

组件化开发

直观地将一个复杂的页面分割成若干个独立的组件，每个组件都包含自己的逻辑和样式（html、css、js），再将这些组件自由组合起来形成完整的界面。

个人感觉组件化很符合编程的思想，能重复多次使用的就封装起来，提高代码的可维护性

组件化开发的好处

提高开发效率
方便重复使用
便于协同开发
更容易被管理和维护

组件分类

按功能分

页面级组件：一个页面就是一个组件
基础组件：将可复用的部分抽离出来，形成基础组件

按用法分

全局组件：可以声明一次在任何地方使用，一般写插件或者是使用很频繁时候常用
局部组件：必须告诉这个组件属于谁

Vue中的组件

vue中的组件是自定义标签（除原生html的元素如 div p span a header section。。。），可以扩展原生的html元素，封装可重用的代码。
组件的组成

Vue组件的使用：

组件名不要带有大写，多个单词用 “-” 连接’
只要组件名和定义名字相同是可以的（首字母可以大写）
html采用短横线隔开命名法，js中转驼峰也是可以的
组件是相互独立的，不能直接跨作用域，实例也是一个组件，组件中拥有声明周期函数
如果组件共用了数据，会导致同时更新（独立性）
子组件不能直接使用父组件的数据（组件之间的数据交互）
组件理论上可以无限嵌套

1) 全局组件

Vue.component('mydiv', {
   
    // 一个对象可以看成一个组件
	template: '<div>{
   
   { msg }}</div>',
	data(){
   
    // 组件中的数据必须是函数类型，返回一个实例作为组件的数据
		return {
   
   
			msg: '是日前端'
		}
	}
})

2) 局部组件

创建组件

let mydiv = {
   
    template: '<div>{
   
   { msg }}</div>' };

注册组件

components: {
   
   
	mydiv
}

引用组件
在页面中使用

<mydiv></mydiv>

所以data必须是函数形式，保证不能返回同一个对象，不能是单例的，
首先在组件中data不能使用对象形式，必须用函数形式，（vue实例除外，是对象形式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <Counter></Counter>
        <Counter>

最低0.47元/天解锁文章