组件之间的数据共享

组件之间的数据共享

组件之间的关系：

最常见：父子关系；兄弟关系

关于传递

传递对象的引用

在 Vue 的组件中，使用 props 传递数据时，对于对象类型的属性，实际上是传递对象的引用。

在给子组件 <son> 传递 user 属性时，如果 userinfo 是一个对象，那么传递的是该对象的引用，而不是对象的副本。这意味着当父组件中的 userinfo 对象发生改变时，子组件中的 user 属性也会随之改变，因为它们引用同一个对象。

简单数据类型是复制一份传过去，复杂数据类型是复制一份数据的引用。

值传递和引用传递

值传递是指将变量的值复制一份传递给函数或另一个变量。这意味着在函数或变量中对参数进行修改不会影响到原始变量。在值传递中，对参数的任何修改都只在当前作用域中有效。

引用传递是指将变量的引用（内存地址）传递给函数或另一个变量。这意味着在函数或变量中对参数进行修改会影响到原始变量，因为它们都指向同一个内存位置。在引用传递中，对参数的修改会在所有引用该参数的地方都可见。

具体的传递方式取决于编程语言和数据类型。一些编程语言只支持值传递，而另一些编程语言支持值传递和引用传递的区分。

在 JavaScript 中，基本数据类型（如数字、字符串、布尔值）被传递给函数时是按值传递的，而对象和数组则是按引用传递的。这意味着对基本数据类型的修改不会影响原始变量，但对对象和数组的修改会影响原始对象或数组。

父子组件之间的数据共享

父向子

使用自定义属性props

父组件提供数据传递给子组件，子组件通过自定义属性来接收。

<template>
  <son :msg="message" :user="userinfo"></son>
</template>
​
<script>//父
export default {
    data(){
        return{
            message:'aaa',
            userinfo:{name:'bbb',age:15}
        }
    }
}
</script>

<template>
  <div>
    <p>父传递来的msg:'{{ msg }}'</p>
    <p>父传递来的user:'{{ user }}'</p>
  </div>
</template>
​
<script>//子
export default {
  props: ['msg', 'user']
}
</script>
​
<style></style>

子向父

子组件向父组件共享数据使用自定义事件（非属性！），

示例代码

如下：先子后父

<script>//子组件
  export default {
    data() {
      return {
        //子组件自己的数据，将count传递给父组件
        count: 0
      };
    },
    methods: {
      add(){
        this.count += 1;
        //修改数据时，通过$emit()触发自定义事件，并传递数据
        this.$emit('numchange',this.count)
      }
    }
  };
</script>

<Right @numchange="getNewCount">这是父组件第一步</Right>
<!-- 1;getNewCount事件处理函数 -->
<script>//
  export default {
    data() {
      return {
        flag: true,
​
        //定义countFromSon对象接收子组件传递过来的数据。 
        countFromSon:0,
      }
    },
​
    methods:{
      getNewCount(val){//这是父组件第二步
        this.countFromSon = val
      }
    },
</script>

$emit方法

$emit()表示触发自定义事件，并传递数据

$emit方法可以接受两个参数：

1. 事件名称（event）：作为第一个参数，用于指定要触发的自定义事件的名称。这个名称可以是任意字符串，但最好使用有意义的名称来描述事件的用途。

2. 数据（payload）：作为可选的第二个参数，用于向父组件传递数据。这个数据可以是任何 JavaScript 数据类型，包括字符串、数字、对象、数组等。

兄弟组件之间的数据共享

eventBus

在vue.2.x中，兄弟组件之间数据共享的方案是eventBus。

步骤

1. 在发送方，先定义要发送的数据；在接收方，定义接受的数据放哪里。

2. 创建eventBus.js模块，并向外共享一个vue的实例对象。

3. 在数据发送方，导入bus，调用bus.$emit('事件名称'，要发送的数据)方法触发自定义事件。

4. 在数据接收方，导入bus，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件。

示例

兄弟组件A（数据发送方） eventBus.js 兄弟组件c（数据接收方）

兄弟组件A（数据发送方）

//导入bus
import bus from './eventBus.js'
​
export default {
    data() {
        return {
            msg: 'this a message'
        }
    },
    methods: {
        sendMsg() {
            bus.$emit('share', this.msg)
        }
    }
}

 

eventBus.js

import Vue from 'vue'
​
//向外共享vue的实例对象。
export default new Vue()

 

兄弟组件c（数据接收方）

​
import bus from './eventBus.js'
​
export default {
    data() {
        return {
            msgFromLeft: ''
        }
    },
    created() { //组件的data，methods已生成好，但模板结构尚未生成，
        bus.$on('share', val => {
            this.msgFromLeft = val
        })
    }
}

 

实例

Left（数据发送方）

<template>
  <div class="left-container">
    <button @click="sendStr">sendabc</button>
  </div>
</template>
  
<script>
import bus from './eventBus'
export default {
  data() {
    return {
      str: 'aaabbbccc',
    }
  },
  methods: {
    sendStr() {
      bus.$emit('share', this.str)
    }
  }
}
</script>

 

Right（数据接收方）

<template>
  <div>
    <div>{{ msgFromLeft }}</div>
  </div>
</template>
  
<script>
import bus from './eventBus'
export default {
  data() {
    return {
      msgFromLeft: '',
    };
  },
  created() { //组件的data，methods已生成好，但模板结构尚未生成，
    bus.$on('share', val => {
      console.log('abc !');
      this.msgFromLeft = val
    })
  },
};
</script>