组件之间最常见的关系有以下两种：
父子关系，兄弟关系
数据共享
一、父组件向子组件传递数据：需要使用自定义属性
示例代码
由子组件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)方法的使用
网友评论