Vue最重要的知识点：组件化开发

左手的ㄟ右手 2022-12-02 04:19 220阅读 0赞

### 目录 ###

*   *   *  
     *  一、计算属性
     *  二、监控
     *  三、组件化开发
     *  四、组件通信
     *  最后

###  ###

今天是刘小爱自学Java的第139天。

感谢你的观看，谢谢你。

![format_png][]

学习计划安排如下：

*  首先补充两个知识点：计算属性和监控。
 *  再学一下vue中的组件化开发，包括全局、局部组件以及父子组件之间的通信。
 *  最后关于组件框架，后续在项目中遇到具体的需求再做说明。

## 一、计算属性 ##

需求：有一个日期的数据，但是是毫秒值，将其转换成日期格式并在页面输出。

![format_png 1][]

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

**①转换毫秒值为日期**

和Java中一样，js中也是使用new Date()创建日期对象，可以将毫秒值转换成日期。

但是其格式是美国的日期格式，所以我们需要转换成中国人自己看得懂的格式。

**②转换日期格式**

*  getFullYear()：获取日期中的年份。
 *  getMonth()：获取日期中的月份，**注意**：美国人月份是从0月开始的，所以需要+1.
 *  getDate()：获取日期中的每月的第几天。
 *  getDay()：获取每个星期的第几天，**注意**：和getDate()不要弄混淆了。

但是这样的话表达式内容很长，就会显得不够优雅，而且后期维护起来也不方便。

并且有一个很大的问题：如果多个地方都要使用到该日期呢？每次都这么长的表达式？

在Java中自然而言就会想到方法的封装，同样的道理，在Vue中提供了计算属性，来替代复杂的表达式，本质也是方法：

![format_png 2][]

既然是方法，肯定要有返回值，页面渲染时，可以把这个方法当成一个变量来使用。

这样的好处在于，只需要使用一次计算属性，哪里需要用该数据，直接引用就好了。

## 二、监控 ##

watch可以让我们监控一个值的变化，从而做出相应的反应。

![format_png 3][]

通过watch属性可以监控data属性中name值的变化，定义监控时，name这个值对应的是一个监控处理函数name()。

将name属性和对话框绑定，并在对应页面绑定name值，然后在浏览器中测试，页面上数据会随着对话框中输入值的变化而变化。

其中监控处理函数name有两个参数：

*  v1表示当前监控的值。
 *  v2表示上一次监控的值。

如果监控的是一个对象，需要进行**深度监控**，才能监控到对象中属性的变化：

![format_png 4][]

现在定义监控时，person是一个对象，并且要指定两个属性：

*  deep：代表深度监控，不仅监控person变化，也监控person中属性变化。
 *  handler：就是以前的监控处理函数。

通过v.name和v.age获取对象中具体的值。

## 三、组件化开发 ##

组件的使用，比如说网易云音乐就是一个典型的例子，多个页面共用一个头部导航栏，所以需要在不同的组件中共享导航栏组件。

这就叫做**组件化开发**。

这样就能避免重复的代码编写，就有点类似于Java中方法或者类的封装。

**1定义全局组件**

![format_png 5][]

**①定义个计数器组件**

我们以前直接new Vue()，这叫创建一个vue实例，现在是自定义一个组件。

*  因为组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
 *  template：其和el属性的作用是类似的，对应视图模板。
 *  data()：定义方式比较特殊，必须是一个函数，作用就对应vue实例中的data属性。

**②注册组件为全局组件**

通过Vue的component方法来注册一个全局组件，参数为组件名和对应组件。

**③全局组件的使用**

全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了，并且可以任意复用多次。

**2局部组件**

![format_png 6][]

局部组件和全局组件在于注册方式不一样：

*  全局组件用vue的component方法注册。
 *  局部组件在vue实例中引用，其key就是子组件名称，其值就是组件对象的属性。

这个组件，个人初次接触后感觉：就有点类似于Java中类或者方法的封装。

## 四、组件通信 ##

和Java中的类有一定的相似之处，组件之间也有父子、兄弟关系。

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

**1父向子通信**

![format_png 7][]

**①调用子组件，并传递值**

通过v-bind:name指令完成msg值的传递，简写方式为:name=“msg”。

因为indroduce组件被注册成了一个全局组件，所以通过组件名直接调用即可。

此时indroduce就是一个子组件。

**②接受父组件传来的值**

通过props属性来接受父组件传来的值：

*  接受简单数据：props\[‘name’\]
 *  接受复杂数据：type可以指定数据类型，default可以指定默认值。

**③将对应值渲染到视图中**

**2子向父通信**

该通信实现起来非常的长，我们分开说明：

![format_png 8][]

父组件中调用子组件counter，同时自定义plus事件，该事件触发的时候会调用add方法。

**子组件和父组件的通信：就是通过子组件来触发父组件自定义的事件来完成的。**

同时也可以传递参数给父组件，在自定义事件触发的方法中以参数的形式接受。

在上述例子中也就是msg这个参数。

**编写子组件并做一个测试**：

![format_png 9][]

我们分析一遍这整个传递的流程：

①+号是子组件counter中对应的html，点击按钮，触发hanleclick方法。

②hanleclick方法中通过this.$emit()可以触发父组件中的事件：

*  第一个参数：plus为父组件中自定义的事件。
 *  第二个参数：可以传递参数给父组件。

③父组件事件触发时会调用add方法，将num加1，同时打印子组件传递过来的参数。

以上便是父子之间的通信，当然还有兄弟间的通信，这个比较复杂就不展开了。

只学父子间通信，在项目中也够用了。

## 最后 ##

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

[format_png]: /images/20221123/47414df61e4447cab5518f5ac4b74b39.png
[format_png 1]: /images/20221123/72c1eff8753941e299cf3a83a2c62138.png
[format_png 2]: /images/20221123/08d347286a55422cac6017f89c3032f5.png
[format_png 3]: /images/20221123/4c1adfda17654d1f87bcc87018d30ec8.png
[format_png 4]: /images/20221123/f93addbc685c43969a7a4a5b2ee36865.png
[format_png 5]: /images/20221123/8862ddfce1f74c3ea7e6cfd437e0bb2e.png
[format_png 6]: /images/20221123/40eb7cf7a5fe4682a2e8daf8a01c6649.png
[format_png 7]: /images/20221123/109b7939b53f4386979174b1da19df26.png
[format_png 8]: /images/20221123/d55211a010c34170aab9c4596b8ed040.png
[format_png 9]: /images/20221123/345bd80b73e24330a2cae2979b8b608b.png