【人生苦短我学Vue】-【DAY05】-组件化开发_综合

大家好，我是被白菜拱的猪。

一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!

文章目录

一、组件化开发

1-什么是组件化开发
2-组件的基本使用
3-全局组件和局部组件
4-父组件和子组件
5-组件的语法糖注册方式
6-组件的模板分离
7-组件数据的存放

（1）存放在data中
（2）组件中的data为什么是一个函数？

8-组件通信

（1）父组件通过props向子组件发送数据
（2）父传子props中属性驼峰命名时
（3）子组件通过自定义事件向父组件发送数据

一、组件化开发

1-什么是组件化开发

在这里插入图片描述
我们把一个页面进行分解，拆分为一个个小的功能，这样方便我们维护和开发，这就是组件，组件可以嵌套，组件里面包含组件，扩展性也很强，组件化思想是Vue中的一个重要的思想，我们要好好学习。

2-组件的基本使用

组件的使用分为三个步骤

创建组件构造器
Vue.extends()
注册组件
Vue.component()
使用组件

注意：组件必须要挂在一个vue中的实例使用，否则不起效果。
具体代码：

3-全局组件和局部组件

当使用Vue.component()注册组件时，该组件是全局组件，假如挂载到某一实例时，则改组件时局部组件。局部组件只能在挂载的实例对象范围内使用，在其他地方使用无效。
在实例对象内注册的方法：
使用components属性，第一个是组件的标签名，第二个是创建的组件的构造器对象。
在这里插入图片描述
多个Vue实例只能使用全局组件和自己的局部组件，不能使用在别的实例里面注册的组件。

4-父组件和子组件

父组件子组件就是相互的嵌套，在一个组件中使用另一个组件。

<body>
<div id="app"><father-cpn></father-cpn><child-cpn></child-cpn>
</div><script src="../js/vue.js"></script>
<script>//父组件，子组件，还有一个Vue相当于root//创建子组件const child = Vue.extend({template : `<div><h2>我是子组件</h2></div>`})//创建父组件const father = Vue.extend({template : `<div><h2>我是父组件</h2><child-cpn></child-cpn></div>`,components: {'child-cpn' : child}})const app = new Vue({el: "#app",data: {message: "ljl is a coding handsome boy"},components: {'father-cpn': father}})
</script>
</body>

假如爷爷想要使用孙子是不可以的。就好比一个小弟只认识直接的大哥，小弟只听他大哥的话，管他大哥听谁的话，反正我就只认你一个大哥，所以大哥的大哥要想使唤小弟的话，小弟鸟都不鸟他的。
在这里插入图片描述

5-组件的语法糖注册方式

全局注册
不用extend，直接在component创建构造器
局部注册

6-组件的模板分离

当我们创建组件的时候在template写HTML代码看起来非常的乱，尤其是在后期开发的过程中，HTML代码非常的多。另外写的时候还及其不方便，缩进什么的也不咋好使。所以下面介绍两种方式来分离模板。

使用script标签, 注意:类型必须是text/x-template
使用template标签
两种方式都要指定id，表明是那个组件的内容

7-组件数据的存放

（1）存放在data中

组件内部是不可以访问Vue实例里面data里的数据的。即使能访问，也不推荐。因为数据放太多会十分的臃肿，所以组件内部应该有一个地方来放数据的。
所有组件中除了 template，components，还有一个data。他不是一个对象，他should be a function，即data（）{}并且改函数返回一个对象。

另外还有一个methods，跟Vue 实例很像。
在这里插入图片描述
注意：图片内的{{name}}不是放在Vue实例中的，而是在组件内部单独有一个data区域放数据。

（2）组件中的data为什么是一个函数？

是为了保证组件的相互独立，假如是data的话，就好比java中static修饰的变量，是共享的，修改一个组件对象的值，别的组件对象的值也会相应改变。所以为了确保自己的对象数据不受干扰，使用函数为每一个对象单独分配数据。

8-组件通信

在实际开发过程中，前台需要想后端请求数据，请求的来的数据往往放在最外面一层组件中，也就是父组件，然后在将数据从父组件传送到子组件，这就避免了子组件多次网络请求，对服务器端造成不必要的压力。子组件也可以向父组件发送数据。
在这里插入图片描述

（1）父组件通过props向子组件发送数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">
<!--将父组件的值通过v-bind与子组件props中的属性传过去
--><cpn :cmessage="message"></cpn>
</div><template id="cpn"><div>{{cmessage}}</div>
</template><script src="../js/vue.js"></script>
<script>const cpn = {template : "#cpn",//1.数据写法//props: ['cmessage']//2.对象写法,可以指定没有// props: {//   cmessage: String// }props: {//3.另一种写法cmessage: {type: String,default: 'nihaoa'}}}const app = new Vue({el: "#app",data: {message: "ljl is a coding handsome boy"},//首先把vue实例当做父组件，然后在创建一个子组件components: {//字面量增强写法cpn}})
</script>
</body>
</html>

假如是数据或者object对象时，设置默认值要使用default（）{
return…
}
不能直接设置默认值。

我认为，传值的桥梁在于v-bind将父组件属性的值与子组件props中属性的值相对应。这是架起父子组件沟通的桥梁，老爸搞告诉儿子要传什么，儿子要准备好东西去接收。

（2）父传子props中属性驼峰命名时

我们对变量经常使用驼峰命名法，但是在props中的属性为驼峰时，前面使用v-bind绑定的时候不支持驼峰。例如props中是childMessage，在前面必须是child-message。HTML不支持大小写。

（3）子组件通过自定义事件向父组件发送数据

未完待续…