本文章向大家介绍vue组件中的数据共享，主要包括vue组件中的数据共享使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下！

在项目开发中，组件之间的最常见的关系分为两种

• 父子关系
• 兄弟关系

父->子共享数据

父组件向子组件共享数据需要使用自定义属性。

父子组件之间的数据共享

父组件：

<template>
  <div id="app">
   <h1>app根组件</h1>
   <left :msg="message" :user="user"></left>
  </div>
</template>
<script>
import left from "./components/left.vue"
export default{
 data(){
  return {
message:"hello everyone",
user:{
  name:"张三",
  age:18
}
  }
 },
 components:{
  left
 }
}
</script>
<style>
#app{
  width: 100%;
  height: 200px;
  background-color: aqua;
}
</style>

子组件：

<template>
  <div>
<p>msg的值是:{{msg}}</p>
<p >user的值是:{{user}}</p>
<!-- 打开控制台vue看点击后的变化 -->
<!-- 点击修改终端报错，修改的是复制了一份的值，跟原来的值无关，也就是父组件没变化
但不建议这样用
-->
<button @click="msg='aaa'">修改msg</button>
<!-- 终端报错 效果同上-->
<button @click="user={sex:'男'}">修改user</button>
<!-- 父组件，子组件都发生了变化 -->
<button @click="user.name='李四'">修改user里的值</button>
<!-- 以上方法不可取，要保证props是只读的，要想修改最好转存一份 -->
  </div>
</template>
<script>
export default {
  props:["msg","user"],
components:{
}
}
</script>
<style scoped>
p{color:red}
 /deep/ h5{
color:orange;
}
</style>

子->父共享数据

子组件向父组件共享数据使用自定义事件。

子组件：

<template>
  <div>
<!-- <p>msg的值是:{{msg}}</p> -->
<!-- <p>user的值是:{{user}}</p> -->
<h3>{{num}}</h3>
<button @click="add">加一</button>
</div>
</template>
<script>
export default {
data(){
  return{
num:0
  }
},
methods:{
  add(){
// 让子组件的num值自增加1
this.num+=1
// 把自增的结果，传给父组件 自定义属性名，值
this.$emit("numchange",this.num)
  }
},
}
</script>
<style lang="less">
 p{color:red}
 /deep/ h5{
color:orange;
} 
</style>

父组件：

<template>
  <div id="app">
   <h1 >app根组件{{numFromSon}}</h1>
   <left @numchange="getnum"></left>
  </div>
</template>
<script>
import left from "./components/left.vue"
export default{
 data(){
  return {
message:"hello everyone",
user: {name: "张三",age: 18},
  numFromSon:0
  }
 },methods:{
  // 获取子组件传递过来的数据
  getnum(val){
   this.numFromSon=val
  }
 },
 components:{
  left
 }
}
</script>
<style>
#app{
  width: 100%;
  height: 200px;
  background-color: aqua;
}
</style>

兄弟组件之间的数据共享

在vue2.x中，兄弟组件之间数据共享的方案是EventBus。之后根组件调用两兄弟标签，通过跟组件显示效果。

EventBus的使用步骤

• 创建eventBus.js模块，并向外共享一个Vue的实例对象。
• 在数据发送方，调用bus.$emit(“事件名称”，要发送的数据)方法触发自定义事件。
• 在数据接收方，调用bus.$on(“事件名称”，事件处理函数)方法注册一个自定义事件。

发送方：

<template>
  <div>
<button @click="send">把文字发送给兄弟组件</button>
</div>
</template>
<script>
import bus from "./eventBus.js"
export default {
data(){
  return{
   text:"我有一剑,可破世间万物"
  }
},
methods:{
  send(){
// 通过eventBus发送数据
  bus.$emit("share",this.text)
  }
},
}
</script>
<style lang="less">
 p{color:red}
 /deep/ h5{
color:orange;
} 
</style>

EventBus：

import Vue from "vue"
// 向外共享Vue的实例对象
export default new Vue()

接收方：

<template>
  <div> 
  <p>{{textFromLeft}}</p>
  </div>
</template>
<script>
// 导入eventBus模块
import bus from "./eventBus.js"
export default {
  data(){
   return{
textFromLeft:""
   } 
  },
  created(){
// 为bus绑定自定义事件
bus.$on("share",(val)=>{
 this. textFromLeft=val
})
  },
components:{ 
}
}
</script>
<style>
div{
width: 50%;
float: left;
}
h5{
color: blueviolet;
}
</style>>

效果：