Vue中組件的數(shù)據(jù)共享分析講解

更新時間：2022年12月01日 08:31:14 作者：未及545

本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實例、應(yīng)用技巧、基本知識點總結(jié)和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下

組件之間的關(guān)系

在項目開發(fā)中，組件之間的最常見的關(guān)系分為兩種

父子關(guān)系
兄弟關(guān)系

父->子共享數(shù)據(jù)

父組件向子組件共享數(shù)據(jù)需要使用自定義屬性。

父子組件之間的數(shù)據(jù)共享

父組件：

<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看點擊后的變化 -->
<!-- 點擊修改終端報錯，修改的是復(fù)制了一份的值，跟原來的值無關(guān)，也就是父組件沒變化
但不建議這樣用
-->
<button @click="msg='aaa'">修改msg</button>
<!-- 終端報錯 效果同上-->
<button @click="user={sex:'男'}">修改user</button>
<!-- 父組件，子組件都發(fā)生了變化 -->
<button @click="user.name='李四'">修改user里的值</button>
<!-- 以上方法不可取，要保證props是只讀的，要想修改最好轉(zhuǎn)存一份 -->
  </div>
</template>
<script>
export default {
  props:["msg","user"],
components:{
}
}
</script>
<style scoped>
p{color:red}
 /deep/ h5{
    color:orange;
}
</style>

子->父共享數(shù)據(jù)

子組件向父組件共享數(shù)據(jù)使用自定義事件。

子組件：

<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
    // 把自增的結(jié)果，傳給父組件 自定義屬性名，值
    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:{
  // 獲取子組件傳遞過來的數(shù)據(jù)
  getnum(val){
   this.numFromSon=val
  }
 },
 components:{
  left
 }
}
</script>
<style>
#app{
  width: 100%;
  height: 200px;
  background-color: aqua;
}
</style>

兄弟組件之間的數(shù)據(jù)共享

在vue2.x中，兄弟組件之間數(shù)據(jù)共享的方案是EventBus。之后根組件調(diào)用兩兄弟標(biāo)簽，通過跟組件顯示效果。

EventBus的使用步驟

創(chuàng)建eventBus.js模塊，并向外共享一個Vue的實例對象。
在數(shù)據(jù)發(fā)送方，調(diào)用bus.$emit(“事件名稱”，要發(fā)送的數(shù)據(jù))方法觸發(fā)自定義事件。
在數(shù)據(jù)接收方，調(diào)用bus.$on(“事件名稱”，事件處理函數(shù))方法注冊一個自定義事件。

發(fā)送方：

<template>
  <div>
<button @click="send">把文字發(fā)送給兄弟組件</button>
</div>
</template>
<script>
import bus from "./eventBus.js"
export default {
data(){
  return{
   text:"我有一劍,可破世間萬物"
  }
},
methods:{
  send(){
    // 通過eventBus發(fā)送數(shù)據(jù)
  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>
// 導(dǎo)入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>>

效果：