vue组件交互 父传子 子传父 非父子

父组件传给子组件：子组件通过props方法接受数据;

子组件传给父组件：$emit方法传递参数

非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

父传子
父组件 ↓

通过自定义事件 :msg (随意命名) item.id===》你要传给子组件值
代码：

    <v-child :msg="item.id"></v-child>

子组件 ↓
通过props 来接收父组件传过的值 （item.id）
代码：

        {
                props:['msg']
            }

---

子传父

子组件↓
代码：
通过childMethod函数 用$emit 传给父组件

<button @click="childMethod">点击就触发父组件事件</button>
                {
                    methods:{
                        childMethod(){
                            this.$emit("getChild","参数")
                        }
                    }
                }

父组件↓
代码：
通过子组件传过来的 @getChild 自定义事件 进行接收
e就是子组件传过来的参数

 <v-child @getChild="parentMethod"></v-child>
                {
                    methods:{
                        parentMethod(e){
                            console.log(e);//e就是事件触发的时候的参数
                            //....
                        }
                    }
                }

---

非父子
第一种：
EventBus 统一事件管理

  this.Event.$emit("事件名称",'参数')
  this.Event.$on("事件名称",(e)=>{

            })

a组件
代码：

<button @click="send">发送</button>
.....
data () {
    return {
        a:"this is a data"
    };
  },
  watch: {},
  computed: {},
  methods: {
      send(){
          this.Event.$emit("sendA",this.a)
      },
      }
  },

b组件
代码：

<p>a传递过来的数据：{{a}}</p>
......
components: {},
  props: [],
  data () {
    return {
        a:"",
        c:""
    };
  },
  watch: {},
  computed: {},
  methods: {
  },
  created () {},
  mounted () {
      this.Event.$on("sendA",(e)=>{
          this.a=e;
          
      })
     
  }

main.js

//全局注册Event
Vue.prototype.Event=new Vue();

第二种：
本地存储
存===》

localStorage.setItem("username", JSON.stringify(this.state.user))

取===》

JSON.parse(localStorage.getItem('username'))

第三种：
vuex