Vue 数据共享 以及 ref应用

组件之间最常见的关系有以下两种：

父子关系，兄弟关系

---

数据共享

一、父组件向子组件传递数据：需要使用自定义属性

示例代码

由子组件props创建自定义属性，将自定义属性绑定在处于父组件中的子组件标签中，属性的值就是父组件中data数据库中的数据值（通过v-bind：动态绑定父组件的值到子组件的自定义属性中。）

二、子组件向父组件传递数据：

子组件向父组件传递数据

由子组件创建自定义事件，通过$emit触发自定义函数，子组件的标签（父组件中的子组件标签）绑定自定义事件，值为父组件定义的事件处理函数，父组件用事件处理函数的val接收由子组件传递过来的数据。

三、兄弟之间的数据传递

在vue.2中，兄弟组件之间的数据共享方案时EventBus

步骤：

①创建eventBus.js模块，并向外共享一个Vue的实例对象

②在数据发送方，调用bus.$emit( '事件名称'，要发送的数据 )方法触发自定义事件。  （使用之前要通过 import  bus from ''导入eventBus.js模块）

③在数据的接收方，调用bus.$on( '事件名称' ，事件处理函数)

兄弟间传递数据示例

---

ref引用

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

使用ref属性，需要为对应的DOM元素添加引用名称 例：

ref应用在DOM元素上

如果想要使用ref引用页面上的组件实例，也可以给组件添加对应的引用名称。引用到组件的实例之后就可以调用组件上的 methods 方法

ref应用在组件实例

案例：通过inputVisible布尔值来控制组件中文本框和按钮的切换（先声明inputVisible为true还是false,用v-if 和v-else进行状态判断，true则显示对应的元素，相应的隐藏）

结构布局

行为部署

切换之后想让文本框自动获得焦点，那么就要为文本框添加ref引用，用来获得文本DOM节点，并同时调用原生DOM对象的.focus()方法，为了保证可以操作到最新的DOM元素，使用this.$nextTick(cb)方法cb是回调函数，具体代码如下：

this.$nextTick(cb)方法的使用