vue组件数据共享

发布于 2021-12-30  310 次阅读


一、组件之间的关系

在实际开发中,组件最常见的关系分为父子关系,兄弟关系

二、组件之间的数据共享

2.1、父组件向子组件
父组件向子组件共享数据需要使用自定义属性。示例代码如下

  <!-- 父组件 -->
  <Left :msg="message" :user="userinfo"></Left>

1.png

子组件使用props进行接受,示例代码:

  props: {
    msg: {},
    user: {},
  },

2.png

2.2、子组件向父组件共享数据
子组件向父组件共享数据需要使用自定义事件,示例代码如下

子组件:

  this.$emit("num", this.count);
  // num为自定义事件,实参为count

3.png

父组件:

  <Right @num="newcount"></Right>
  // 定义num自定义事件,调用newCount函数

  methods:{
    newcount(val){
      this.countSon = val
      // 将传来的实参复制给countSon
    }
  },

2.3、兄弟组件之间数据共享

在vue2.x中兄弟组件共享数据使用的是EventBus

EventBus的使用步骤

  1. 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象
  2. 在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
  3. 在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

示例代码:

发送方:

import bus from "@/components/enevtBus.js";

  methods: {
    send() {
      // 通过eventbug发送数据
      bus.$emit("share", this.str);
    },
  },

接收方:

import bus from "@/components/enevtBus.js";

  created() {
    // 获取left组件传过来的str
    bus.$on("share", (val) => {
      this.strFromLeft = val;
    });
  },

eventbus:

import Vue from 'vue'


export default new Vue()

小小孩子们