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

时间:2022-12-01 未及545 人气:0

组件之间的关系

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

父子关系
兄弟关系

父->子共享数据

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

父子组件之间的数据共享

父组件：

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

效果：

加载全部内容