史上最全的vue中组件之间的传值方式

重中之重的就是组件之间数据传递的几种方式

Vue2最常见的11种组件间的通讯方式

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref（获取子组件的属性和调用子组件方法）本质就是获取到子组件的this
6. $children /$parent（获取子组件（不包括顺孙组件）的数组 / 获取父组件的this）
7. $attrs /$listeners（$attrs子组件里面获取父组件传递的属性，$listeners子组件获取父组件自定义的方法（这个自定义方法是子组件通过$emit传递过去的））
8. provide / inject
9. EventBus
10. Vuex
11. $root（获取根组件的，new Vue里面定义的方法和属性）
12. Slot
13. 发布订阅（pubsub-js）
14. 本地存储（localstorage和sessionstorage）

props

父组件向子组件传送数据，这应该是最常用的方式了

子组件接收到数据之后，不能直接修改父组件的数据。

否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed

// Parent.vue 传送

// Child.vue 接收

export default {

// 写法一 用数组接收

props:['msg'],

// 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等 props:{

msg:{

type:String,

default:'这是默认数据'

}

},

mounted(){

console.log(this.msg)

},

}

.sync 子组件可以修改父组件内容

.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

// Parent.vue

v-model

和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据

// Parent.vue

ref

ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;

如果在子组件上，引用的指向就是子组件实例;

父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法

// Child.vue

export default {

data(){

return {

name:"oldCode"

}

},

methods:{

someMethod(msg){

console.log(msg)

}

}

}

// Parent.vue

$emit / v-on

子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作

// Child.vue 派发

export default {

data(){

return { msg: "这是发给父组件的信息" }

},

methods: {

handleClick(){

this.$emit("sendMsg",this.msg)

}

},

}// Parent.vue 响应

export default {

methods:{

getChildMsg(msg){

console.log(msg) // 这是父组件接收到的消息 }

}

}

$attrs /$listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时

$attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"

$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on="$linteners"使用方式是相同的

// Parent.vue