Vue开发日志：宏观布局

总纲

不识庐山真面目，只缘身在此山中

跳出三界之外，才能看清全局

拆分

天下大势，合久必分。
原始的开发方式，将所有的东西都塞到一个容器里，维护起来，相当头痛。

要在几千上万行代码内理清每部分的关系，简直是将世界地图一字不落的全塞到脑子里来进行，除非有过目不忘的本领，但大多数人是普通人，如果不能让大多数人都使用的技术，他就无法量产，不能量产，就无法形成行业，这个社会也无法发展。

从零到一，是在世界的天花板上开一个小口。而从一到万，则是由量变引发质变。不完成这个闭环，任何社会都玩完。因为你不动，世界在动，不适应就被淘汰，物竞天择，自然大道！

组件化开发：拆分页面

Vue的开发过程，就像是搭积木。每个页面内包含很多的模块，每个模块就是一块积木。准备好所有积木，然后拼装在一起，就完成了Vue的开发过程。

这里的每个积木，就是一个组件。

反思：如何掌握搭建积木的脚手架，就像是造房屋，得有总设计图。拿到这个设计图，一切都好办了，设计图就是接口，只定义，占位，不去实现。实现交给技术开发人员，总工程师就是架构师，永远关注的是整体。

目的：将整体功能做一个拆分，分治思想是顶层思想。
分治的目的：在于高效，之所以能高效，在于能够直观的迅速定位到出现问题的地方，通过文件索引即可定位到组件，而非在整体一个大地图内去查找。
因此分治就引入了封装，只有封装，才是在做分治的工作。
目的是降低维护压力，因为组件是直观符合人性的。

模块化开发：拆分功能

两者的关系

拆分页面的多个积木都有可能用到一个模块，就是功能拆分后的子功能。这样就实现了阿米巴管理方法，页面就像是空间，功能就像是时间。没有空间的时间，毫无意义。没有时间的空间，将是静止的，没有希望的。两者谁也离不开谁，因此组件和模块是双生子，同时出现在应用的任意位置上。当然，其实没有功能的静态页面，相当于是一个实现了一个什么都不做的功能，必须要适应这种思维，因为大自然厌恶真空，所以，需要一个空功能来填充这个页面，这样就泛化了开发世界。大家都是遵循一样的规律，静态页面只是动态页面的一个极端示例。

集成

天下大势，分久必合

只有将拆分的功能和页面，拼装在一起，才能构筑一个应用。

组件传参

要拼接组件，组件传参是绕不过去的一个关卡，必须拿下，其为咽喉，攻取后四通八达。

父组件向子组件传参

由子组件接收参数，处理后，展示或回传。
示例：

# 父组件
<child></child>
# 子组件
<script>
export default{
}
</script>

要在父组件中传参，比如：传递一个叫信息的参数，键名为message。

# 父组件
<child v-bind:message="msg"></child>
<script>
export default{
	data(){
		return{
			msg:'hello'
		}
	}
}
</script>

在父组件中定义一个数据叫msg，然后通过在child子组件标签中v-bind的形式绑定msg，绑定到子组件的message属性上。这样，当父组件的msg变化后，会同时传递到子组件的message中。这样就完成了，组件传参的过程。
注意：这里的v-bind:message=“msg” 可以缩写成 :message=“msg”，实际开发中都会用后一种形式。

子组件接收参数

# 子组件
<script>
export default{
	props:[],
	//props:{},
}
</script>

在子组件中，通过props属性来接收，传入的参数。有两种形式，一为数组，二为对象。

先看数组

# 子组件
<script>
export default{
	props:["message"],
}
</script>

通过在数组中写入键名，完成参数的注册工作。如果要展示，在template中渲染一下即可。

# 子组件
<template>
	<div>
		{{ message }}
	</div>
</template>
<script>
export default{
	props:["message"],
}
</script>

这个过程就像同城配送：
父组件就像是整个城市，子组件是城市内某个具体的小区。
message就像是具体的门牌号，如果门牌号填错，那就无法配送到你手中。因此父子组件中的message书写一定要一致，保证能够配送到手。

理解了这种模式，接下来看下对象模式。

# 子组件
<template>
	<div>
		{{ message }}
	</div>
</template>
<script>
export default{
	//props:["message"],
	props:{
		message:string,
	},
}
</script>

原则都是一样的，门牌号填写正确，而后面填写的值有所不同。
需要填写传递过来的参数的数据类型，这里message绑定的是父组件的msg，查看一下，是字符串类型，因此，后面就要填写string。
不仅如此，内部的门牌号还可以填写更详细的配置信息，就像是一些个性化的备注信息。

# 子组件
<template>
	<div>
		{{ message }}
	</div>
</template>
<script>
export default{
	//props:["message"],
	props:{
		message:{
			type:string,
			default:'默认值：如果父组件没有传参过来时，用这个占位'
		}
	},
}
</script>

type就是参数的类型，default就是无参时的默认值。此外，还有很多的配置，这里不赘述，只提供整体思路。会写一二三，就会写百千万。这就是师傅领进门，修行靠个人！

子组件向父组件传参

接下来，要想将子组件处理好的结果，传递回到父组件中，我们可以使用事件的冒泡：

this.$emit();//拥有两个参数：参数1：事件名称；参数2：传递的参数

应用到例子中：

# 子组件
<template>
	<div>
		{{ message }}
	</div>
</template>
<script>
export default{
	//props:["message"],
	props:{
		message:{
			type:string,
			default:'默认值：如果父组件没有传参过来时，用这个占位'
		}
	},
	methods：{
		setNum(){
			let count = 666;
			this.$emit('sendData',count);//发送事件
		}
	}
}
</script>

首先，在methods中添加一个方法,比如setNum。在这里发送事件，把count这个值给传递出去。

就像是同城配送中的送达给好评。count = 666，就是给了一个666的好评！

父组件接收参数

接收参数，我们通过自定义事件：@sendData

# 父组件
<child :message="msg" @sendData="getNum"></child>
<script>
export default{
	data(){
		return{
			msg:'hello'
		}
	},
	methods:{
		getNum(num){
			alert(num)
		}
	}
}
</script>

这里@sendData绑定一个叫做getNum的方法，有这个方法来接收要子组件传递过来的参数。
getNum在这里相当于就是回调函数。

这部分就像是配送公司，得到了用户的好评反馈后，进行官方APP展示好评。这里可以做各种自定义处理了，比如，是好评就置顶，是差评就置底，哈哈！

场记

在 Vue.js 中，HTML 特性名（attribute names）遵循的是 HTML 规范，要求使用短横线（kebab-case）命名方式，即连字符分隔的小写形式。这是因为浏览器只识别这种形式的特性名。

但在 Vue 的模板语法或者 JavaScript 中定义组件的 props 时，由于 Vue 的 JavaScript 特性，我们使用驼峰命名（camelCase）来定义 prop。例如：

<!-- 在父组件模板中使用 kebab-case -->
<child-component my-prop-name="value"></child-component>

// 在子组件中使用 camelCase 来定义 prop
export default {
  props: {
    myPropName: String // 驼峰命名
  }
}

当 Vue 解析模板时，它会自动将模板中 kebab-case 的属性名转换为 camelCase 形式，使得父组件传递的 prop 能够正确匹配到子组件定义的 prop 上。所以尽管在模板中使用了短横线命名，但在 JavaScript 中仍然使用驼峰命名来保持一致性。这样做的好处是可以遵循 JavaScript 的编码规范，同时也能兼容 HTML 的书写规则。