Vue中的组件数据共享问题和非父子组件的通讯

一.组件数据共享问题

一.父组件向子组件共享数据 props

1.1 父组件向子组件共享数据

image.png

1.2 定义一个父组件App.vue

<template>
  <div id="app">
    <h1 class="title">App根组件</h1>
    <hr />
    <Left :msg="message" :user="userInfo"></Left>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
export default {
  name: "App",
  components: {
    Left,
  },
  data() {
    return {
      message: "hello,VueJs",
      userInfo: { name: "huzhenchu", age: 18 },
    };
  },
};
</script>

<style lang="less" scoped>
#app {
  .title {
    background-color: #ccc;
  }
}
</style>

1.3定义一个子组件 Left.vue

<template>
  <div class="left-box">
    <h1>我是子组件Left</h1>
    <h2>msg的值是:{{ msg }}</h2>
    <h2>user的值是:{{ user.name }}</h2>
    <h2>user的值是:{{ user.age }}</h2>
  </div>
</template>

<script>
export default {
  props:['msg','user'],
  data() {
    return {}
  }
};
</script>

<style lang="less" scoped>
.left-box {
  background-color: pink;
}
</style>

1.4 父传子流程截图:

image.png

二. 子组件向父组件传值 this.$emit('事件名称', 需要传递的参数)

2.1 子组件向父组件传值截图:

image.png

2.2.定义一个父组件App.vue

<template>
  <div id="app">
    <h1 class="title">App根组件</h1>
    <h3>这个是子组件Right中传递过来的值:{{countFromRight}}</h3>
    <hr />
    <!-- <Left :msg="message" :user="userInfo"></Left> -->

    <!-- 子组件向父组件传值 -->
    <Right @numchange="getNewCount"></Right>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
  name: "App",
  components: {
    Left,
    Right
  },
  data() {
    return {
      message: "hello,VueJs",
      userInfo: { name: "huzhenchu", age: 18 },
      countFromRight: 0, // 接收countFromRight 来接收子组件的传递过来的数据
    };
  },

  methods:{
    getNewCount(count) {
      this.countFromRight = count
    }
  }
};
</script>

<style lang="less" scoped>
#app {
  .title {
    background-color: #ccc;
  }
}
</style>

2.3 定义一个子组件Right.vue

<template>
  <div class="right-box">
    <h1>我是子组件Right</h1>
    <h3>Right组件--{{ count }}</h3>
    <button @click="add">+ 1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0, // 子组件自己定义的数据, 将来把数据count传递给父组件
    };
  },
  methods: {
    add() {
      this.count += 1;

      // 通过$emit() 触发自定义事件
      this.$emit('numchange',this.count)
    },
  },
};
</script>

<style lang="less" scoped>
.right-box {
  background-color: #f00;
}
</style>

2.4 实际截图:

image.png

三.Vue中的非父子组件的通讯 发射方 bus.on('接收名字',(val)=> {})

3.1. 定义一个文件

import Vue from 'vue'

let VueEvent = new Vue()  // 这个地方new  Vue的话就是想要把他重新的定义一下 

export default VueEvent

实际截图:

image.png

3.2. 需要发射的事件

<template>
<div>
  这个是about组件
  <button class="button" @click="emitToHome">点击事件</button>
</div>
</template>

<script>
import VueEvent from '../bus/VueEvent'
export default {
  data() {
    return {
      title: "这个是about组件里面传递过来的数据。。。"
    }
  },
  methods: {
    emitToHome() {
      /**
       * 这个是发射方:
       * 在VueEvent.js中new Vue出来的这个实力对象,
       * 就像是一个中转站一样的重新的把组件的事件绑定到一个公共的VueEvent.js中,
       * 然后发射出去，在全局的一个 VueEvent.js 中好让其他的非父子组件里面可以调用到
       * 参数一： 要发射出去的的事件名称
       * 参数二： 要传递过去的数据
       * 
       * **/
      VueEvent.$emit('toHome', this.title)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

image.png

3.3. 接收事件参数

<template>
<div>
  这个是Home组件
  <p>
    这个的是从about传递过来的数据：<strong>{{ msg }}</strong>
  </p>
</div>
</template>

<script>
import VueEvent from "../bus/VueEvent";
export default {
  data() {
    return {
      msg: ''
    }
  },
  /**
     这个是接收方:
   * 如果想在当前页面获取到非父子组件的数据的话
   * 需要在当前页面刚加载完成以后 来进行操作
   * 他操作的方式： VueEvent.$on('toHome', (data) =>{} )
   * 
   * 参数一：就是在about里面发射出来的那个事件 toHome
   * 
   * 参数二：是一个函数  在函数里面接受传递过来的 数据data
   * 
   * **/
  mounted() {
    VueEvent.$on('toHome', (data) => {
      console.log(data);
      this.msg = data
    })
  }
};
</script>

<style lang="scss" scoped>
</style>

image.png

切记接收的第一个是发射的名称,第二个是一个回调函数,接收方要在 mounted或者created中去接收

image.png

EventBus的使用步骤:

image.png