一.什么是组件\
当我们遇到复杂问题时，很难一次性搞定所有问题所以这时需要把问题拆解，
把小问题都解决后综合起来就能得到这个问题的解决方案，听起来很熟悉吧！
其实在动态规划中就是这种思想了，只不过是最优解和解决方案的区分。\
组件化也是这种解决问题的思路，当一个项目中的功能逻辑特别复杂时,
我们很难一次性完成所有逻辑交互，因为容易发生冗余或回调地狱，一旦某一部分出错，
很难追究到哪 行代码出现问题。
同时一个人的精力是有限的，为了减轻个人的压力，将问题分为小的功能模块，
既可以减少管理和维护该界面的成本，也可以适合团队合作。\
但其实 Vue 的前端开发不需要很多人，因为它是轻量级的，
所以实际项目中只需要美 工人员把设计好的原型发给一两个前端开发人员就行了，
至于为什么需要这么少的开发人员，很大程度上因为 Vue 的组件化开发让业务逻辑更清晰\
二.组件化思想\
●组件化的思想让我们能够开发出一个个独立且可复用的小组件来构造我们的应用。
●每一个应用(功能)都可以抽象成一个组件树。\
●尽可能的将页面拆分成小且可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。\
三.组件的好处\
1组件是独立和可复用的代码组织单元。组件系统是 vue 核心特性之一，
它使开发者使用小型、独立和通常可复 用的组件构建大型应用；\
2组件化开发能大幅度提高应用开发效率、测试性、复用性等；\
3能让 web 前端代码实现“高内聚 低耦合”，使得前端开发的过程变成搭积木的过程。\
四.组件的基本使用\
1定义组件\
2注册组件\
组件的命名规则：\
可以是驼峰式，渲染的时候需要写成全小写并设置连接符 如： MyHeader ---> my-header\
可以是全小写，渲染的时候直接渲染即可 如 : myheader--->myheader\
可以是首字母大写，渲染的时候直接渲染即可，或者全小写 如 : Myheader--->Myheader 或 myheader\
3渲染组件\
五.组件通信(9种方式)\
每个组件的数据都是独立的，组件之间通信需要按照一定的方式传递数据\
父传子\
1在渲染的子组件上使用 v-bind 的方式传递父组件的数据\
2在子组件中使用 props 接受传递的数据\
`<BODY>
<DIV ID-"APP">
<H1>父组件---{MSG}>/H1>
<CHILD></CHILD>
<CHILD :MSG-"MSG"></CHILD>
</DIV>
<SCRIPT SRC-"VLIB/VUE.JS"></SCRIPT>
<SCRIPT>
CHILD
CONST
PROPS
MSG:
STRING
TYPE:
DEFAULT:"默认值",
了,
TEMPLATE
KDIV
<H2>子组件---{{MSG}</H2>
JUTTON@CLICK-"MSG-'更新了">更新了</BUTTON>
<AIP/>
VUE
NEW
EL:
APP"
DATA
"父组件的数据",
MSG:
COMPONENTS:{
CHILD,
J);
/SCRIPT>
子传父
1在渲染的子组件上使用 v-on 的方式监听父组件的函数
2在子组件中使用on 的方式监听函数
3在组件 b 中使用 attrs、refs、$parent\
JavaScript复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<body>
<div id="app">
<div id="box" ref="boxRef">this is a box</div>
<Child ref="ChildRef"></Child>
</div>
<script src="./lib/vue.js"></script>
<script>
const Child = {
data() {
return {
son: "子组件的数据",
};
},
methods: {
show() {
console.log(this.son);
},
},
template: `
<div>
<h2>子组件</h2>
</div>
`,
created() {
// 获取父组件的数据或者函数
// console.log(this.$parent.msg);
},
};
new Vue({
el: "#app",
data: {
msg: "hello vue",
},
// created 只会执行一次
created() {
console.log(document.getElementById("box").innerHTML);
// 实时监听DOM元素的变化，挂载完毕了以及触发回调函数
this.$nextTick(() => {
console.log("nextTick" + this.$refs.boxRef);
});
\
console.log("-----------------------------------------------------");
// console.log(this.$refs.ChildRef);
},
// mounted 只会执行一次
mounted() {
console.log(this);
// 获取子组件的数据或者函数
// console.log(this.$refs.ChildRef.son);
// this.$refs.ChildRef.show();
\
console.log(document.getElementById("box").innerHTML);
console.log(this.$refs.boxRef);
},
components: {
Child,
},
});
</script>
</body>
`
