vue组件间的几种传值方式

父传子

1. 先在父组件中给子组件的自定义属性绑定一个 父组件的变量

//父组件
<template>
   <child :子组件中定义的属性名="父组件中定义的变量"></child> 
<template>

2. 在子组件中通过props属性可以接收父组件传的值

//子组件
export default {
    props: ["子组件中定义的属性名"],
    data() {}
}

子传父

1 先在父组件中给子组件的 自定义属性 绑定一个父组件的函数

//父组件
<template>
    <child  @子组件中定义的函数="父组件中定义的函数">
<template>
export default {
    data() {}
    methods:{
        父组件中定义的函数(res){
            //res：子组件中传递过来的数据
        }
    }
})

2. 在子组件中 this.$emit(“父组件的函数”,传给父组件的数据) 触发父组件中的函数进行传参

//子组件
export default {
    data() {}
    methods:{
        子组件中定义的函数(){
            this.$emit("父组件的函数",传给父组件的数据)
        }
    }
})

兄弟之间传值

1. 创建全局Vue实例：eventBus

//util/eventBus.js
import Vue from 'vue';
const eventBus= new Vue();
export default eventBus;

2. 需要传值页面使用$emit发布事件 - 传递值

import eventBus from '@util/eventBus';
eventBus.$emit('send','我是传递的值');

3. 具体页面使用$on订阅事件 - 接收组件值

import eventBus from '@util/eventBus';
eventBus.$on('send', msg => {
    console.log('我是传递的值')  //控制台输出 我是传递的值
}