组件传参+Vuex(建议收藏)

VUE中的几种组件传参方式
对于vue来说常见的就是兄弟传值，父子传值

1.父传子
在父组件中定义数据，子组件通过props接收父组件传递的数据加以使用

父组件

        <div class="box">
            <p>这是父组件</p>
            <son :list="list"></son>
        </div>

子组件

  props:['list'], //接收到父组件数据

2.子传父
子组件向父组件传递参数

3.兄弟组件传值
非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

bus.js

//导入vue
import Vue from "vue";
//导出vue创建的空实例

var bus = new Vue();
export default bus;
<template>
    <div class="nav" :style="{backgroundColor:bg_color,color:text_color}">
        <div class="left" @click="$emit('left-click',$event)">
            <slot name="icon_left"