Vue2学习之生命周期与组件之间数据共享

Vue组件的实例对象

每一个.vue文件都是模板文件，且并不是直接交给浏览器去解析和渲染的，而是经过package.json里面中的一个依赖包（图中红圈部分）替我们把vue文件编译解析成JavaScript文件才得以在浏览器中运行的。

另外还需要知道一点就是，每次在使用vue组件的时候，其实都相当于是new了一个该组件的实例对象，比如：

组件的生命周期与生命周期函数（重要的）

Vue提供的这些函数可以供程序员在对应组件的当前状态做出对应的代码操作（比如在组件创建前要干啥干啥，在组件销毁后要干啥干啥等），而这些代码操作就可以放在这些对应的生命周期函数里面。

组件生命周期函数的分类

下面这张是官网的，可以时不时的拿出来琢磨琢磨：

其中created函数非常重要，经常用到，我们开发中经常在它里面调用methods中的方法请求服务器的数据，并且把请求到的数据，转存到data中供template模板渲染的时候使用。
还有mounted和updated都还挺有用的，得有印象，而且要记得，这些周期函数使用时和data、methods啥的是平级的。

组件之间的数据共享

组件之间的关系

父子组件之间的数据共享

分为父->子传和子向父传。

父向子组件传值（之前讲过了已经）

子向父组件传值

为啥叫自定义事件呢…从上图中的父组件部分看来，它上面显示的事件函数是@numchange，这其实和@click很像不是吗？所以应该这么理解，因为click啊（鼠标单击事件）、keyup啊（键盘敲击事件）等这些都是JavaScript自带的事件函数，而numchange是我们自己定义的事件函数，所以是自定义事件，这样应该会好理解一点，当numchange这个事件发生时就会调用getNewCount函数（就像@click="xxx"是当鼠标点击时，就触发其后面的xxx函数）。

需要注意的是，自定义事件的名字是随便取的，并非固定的叫numchange。
其中父组件监听到$emit触发自定义事件之后在父组件中就会调用一个函数来处理这次事件，即getNewCount函数，其中可以用val来接收子组件传过来的值。其中val也是自己定义的形参，可以改。

兄弟组件之间的数据共享

了解就行了…这是Vue2中的解决方法，已经快淘汰了已经，毕竟现在都是Vue3了。

ref

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。
每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

使用ref引用DOM元素

示例：

使用ref引用组件实例

比如现在我们有一个需求，就是要在App父组件当中可以有一个按钮能重置Left子组件中的count为0的操作，如下：


那么其实我们已经知道在Left组件中，通过this就可以访问Left组件中的count值，而Left组件中的this代表的就是当前这个页面的实例对象，即Left组件的实例对象，那么我们只要在App父组件当中拿到这个实例对象，通过操作它就可以得到Left子组件中的count了，就可以实现我们的操作。
我们可以用ref来获得子组件的实例对象。

我们直接引用其中的属性或者方法都可以实现我们的需求：

控制文本框和按钮的按需切换

让文本框自动获得焦点

示例：

但是此时调用focus，会报下面的错误：

为什么？
在实际开发中，我们会频繁遇到这个错。所以这个错一定得读明白，这个错误的意思是，我要调用这个focus方法（或者属性），但是这个focus方法之前的前置条件（方法或者属性）却还未定义，所以报错。那么为什么是未定义呢（在上面的代码中是iptRef未定义）？
其实这和JavaScript的异步特性有关，我们的上一行代码是this.inputVisiable= true：

在这个方法中，这两句代码都是同步任务，所以是同步执行的，上面的代码执行完就直接执行下面的this.$refs.inpRef.focus()，但是我们的异步任务也就是上面的文本框其实还没有创建，因为它根本还来不及创建即使inputVisiable已经为true：

这里可以结合Vue的生命周期函数来理解：

所以此时的iptRef根本就还没创建出来，所以报错：inpRef还未创建。
怎么解决？
其实很好解决，我们只要确保党页面中有了iptRef之后再去执行这句this.$refs.iptRef.focus()即可。
就是将这句代码延时处理，如何做到？就是下面提到的this.$nextTick()方法。

this.$nextTick(cb)方法

上面的cb是回调函数的意思。

所以上面的问题代码改成下面这样即可：