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>

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

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