vue传值总结*vue传值总结一.父子模式 props 父传子属性 emit 子传父。 this.$emit(‘f

**vue传值总结*

一.父子模式

props 父传子属性

emit 子传父。

this. $emit(‘function方法名’,event事件/attribute属性) this.$ emit('click',event/value)

二.多层即祖先后代模式

一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

子级 inject注入父级提供数据/方法的调用

父级 provide 提供父级数据/方法的调用

三.vuex数据共享

全局参数，可以作为全局数据使用。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

四、使用$ref传值

ref为子组件指定一个索引名称，通过索引来操作子组件；

通过$ref的能力，给子组件定义一个ID，父组件通过这个ID可以直接访问子组件里面的方法和属性

this.$ref['组件上的ref名‘]['组件上的方法名']（）

this.$ref['组件上的ref名‘]['组件上的属性名']

五.兄弟组件eventBus事件总线

创建方法

方法1:

新增一个文件EventBus.js

import Vue form 'vue'；

export default const EventBus= new Vue()

方法2:

在main.js文件里面添加

vue.prototype.$EventBus= new Vue()

调用方法

A/B 组件

import { eventBus} from '@/EventBus'

A组件发送信息方法

eventBus.$emit('事件名',属性值)

B组件监听消息方法

eventBus.$on('事件名',（属性值)=>{

处理逻辑

})

六.this.$parent 和this.children

this.$parent 可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }

this.$parent 可以直接访问该组件的父实例或组件；

父组件也可以通过this.$children 访问它所有的子组件，

$parent和$ children 可以递归向上或向下无线访问，直到根实例或最内层的组件。

七.$attrs和$listener

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过 v-bind="$ attrs" 传入内部组件——在创建高级别的组件时非常有用。（父传孙专用）

$listener包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$ listeners" 传入内部组件——在创建更高层次的组件时非常有用。（孙传父专用）

A父组件里面导入了B组件，可是B组件里面又导入了C组件，现在需要A父组件传值给C组件，或者是C组件需要传值给父组件，这时候就需要用到 $attrs和$ listeners了。

test

使用场景：

组件传值时使用：爷爷在父亲组件传递值，父亲组件会通过 $attrs获取到不在父亲props里面的所有属性，父亲组件通过在孙子组件上绑定$ attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法；
对一些UI库进行二次封装时使用：比如element-ui，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候 $attrs和$ listners是个完美的解决方案。