Vue中实现数据传递的几种方法有哪些？
- 内容介绍
- 文章标签
- 相关推荐
本文共计784个文字，预计阅读时间需要4分钟。
props：适用于父子组件通信；由父组件传递值给子组件，子组件在props中接收即可；（由父组件传递函数类型的props可实现子组件向父组件传数据，较为复杂，不推荐）
props：适用于 父组件 ==> 子组件 通信
由父组件传值子组件在props中接收即可；
(由父组件给子组件传递 函数类型 的props可实现 子组件 ==> 父组件 传递数据，较为繁琐，不推荐)；
Non-prop属性：适用于父组件 ==> 子组件通信父组件给子组件传递内容时，子组件不使用props接收时，需要使用 $attrs 接收；
$listeners：this.$listeners: 自动会收集所有加在这个组件上的事件监听 注意：使用.native修饰符的事件，不会体现在$listeners属性上组件的自定义事件：适用于子组件 ==> 父组件 通信
在父组件中给子组件绑定一个自定义事件事件：
首先，在父组件中给子组件绑定自定义事件 <child @事件名="test"> 或者this.$refs.xxx.$on(‘事件名’，test) ，test为父组件中的回调函数
然后在子组件中，触发自定义事件 this.$emit('事件名',数据)
（通过refs绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题）
$parent和$children：适用于父组件 <==> 子组件通信
在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$parent.message = this.mymessage;
//通过如此调用可以改变父组件的值
}
},
template:`<p>
<input type="text" v-model="mymessage" @change="changeValue">
</p>`
})
Vue.component('parent',{
template:`<p>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</p>`,
methods:{
changeChildValue(){
this.$children[0].mymessage = 'hello';
}
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`<p>
<parent></parent>
</p> `
})
provide和inject：适用于 祖孙组件 之间通信
全局事件总线：适用于 任意组件 之间通信
原理：VueComponent.prototype.__proto__ === Vue.prototype
消息订阅与发布：适用于任意组件之间通信
vuex: 适用于 任意组件 之间共享数据
在vue中实现集中式状态(数据)管理的一个vue插件
一般用于中大型web单页应用中进行一个状态管理
localStorage / sessionStroage：
这种方式通信比较简单，但数据和状态比较混乱，不容易维护
可以结合vuex实现数据的持久化存储，同时结合vuex可以解决数据和状态混乱的问题
需要使用JSON.parse() / JSON.stringify() 做数据格式转换
路由传参：
插槽：
参考：
this.$listeners在vue项目中的使用
vue传值的几种方式
全局事件总线
本文共计784个文字，预计阅读时间需要4分钟。
props：适用于父子组件通信；由父组件传递值给子组件，子组件在props中接收即可；（由父组件传递函数类型的props可实现子组件向父组件传数据，较为复杂，不推荐）
props：适用于 父组件 ==> 子组件 通信
由父组件传值子组件在props中接收即可；
(由父组件给子组件传递 函数类型 的props可实现 子组件 ==> 父组件 传递数据，较为繁琐，不推荐)；
Non-prop属性：适用于父组件 ==> 子组件通信父组件给子组件传递内容时，子组件不使用props接收时，需要使用 $attrs 接收；
$listeners：this.$listeners: 自动会收集所有加在这个组件上的事件监听 注意：使用.native修饰符的事件，不会体现在$listeners属性上组件的自定义事件：适用于子组件 ==> 父组件 通信
在父组件中给子组件绑定一个自定义事件事件：
首先，在父组件中给子组件绑定自定义事件 <child @事件名="test"> 或者this.$refs.xxx.$on(‘事件名’，test) ，test为父组件中的回调函数
然后在子组件中，触发自定义事件 this.$emit('事件名',数据)
（通过refs绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题）
$parent和$children：适用于父组件 <==> 子组件通信
在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$parent.message = this.mymessage;
//通过如此调用可以改变父组件的值
}
},
template:`<p>
<input type="text" v-model="mymessage" @change="changeValue">
</p>`
})
Vue.component('parent',{
template:`<p>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</p>`,
methods:{
changeChildValue(){
this.$children[0].mymessage = 'hello';
}
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`<p>
<parent></parent>
</p> `
})
provide和inject：适用于 祖孙组件 之间通信
全局事件总线：适用于 任意组件 之间通信
原理：VueComponent.prototype.__proto__ === Vue.prototype
消息订阅与发布：适用于任意组件之间通信
vuex: 适用于 任意组件 之间共享数据
在vue中实现集中式状态(数据)管理的一个vue插件
一般用于中大型web单页应用中进行一个状态管理
localStorage / sessionStroage：
这种方式通信比较简单，但数据和状态比较混乱，不容易维护
可以结合vuex实现数据的持久化存储，同时结合vuex可以解决数据和状态混乱的问题
需要使用JSON.parse() / JSON.stringify() 做数据格式转换
路由传参：
插槽：
参考：
this.$listeners在vue项目中的使用
vue传值的几种方式
全局事件总线