Vue中组件的数据共享分析讲解

目录

• 组件之间的关系
• 父子组件之间的数据共享
• 兄弟组件之间的数据共享
• EventBus的使用步骤

组件之间的关系

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

• 父子关系
• 兄弟关系

父->子共享数据

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

父子组件之间的数据共享

父组件：

<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>>

效果：

到此这篇关于Vue中组件的数据共享分析讲解的文章就介绍到这了,更多相关Vue组件数据共享内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！