Vue 组件间通讯传值

##通过路由带参数进行传值
两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

在B组件中获取A组件传递过来的参数

this.$route.query.orderId

##通过设置 Session Storage缓存的形式进行传递
两个组件A和B，在A组件中设置缓存orderData

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('data', JSON.stringify(orderData))

B组件就可以获取在A中设置的缓存了

const dataB = JSON.parse(sessionStorage.getItem('data'))

##父子组件之间的传值

• 父组件往子组件传值props
  定义父组件，父组件传递 parentToChild这个值给子组件，如果传递的参数很多，推荐使用json数组{}的形式

<template>
  <div>
    <parent>
      <child :title="dataValue"></child>
    </parent>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataValue:'父组件的值传给子组件'
    }
  }
}
</script>

定义子组件，子组件通过 props方法获取父组件传递过来的值

<template>
  <div>
    <p>这是子组件,来自父组件的内容：{{parentValue}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      parentValue:'',
    }
  },
  components: {},
  props: {
    title: {
      type: String,
      default: '来自父组件的值'
    }
  }，
  created(){
    this.parentValue = this.title
  }
}
</script>

父组件要传递给子组件的值为dataValue，key为title，props中可以定义能接收的数据类型，如果不符合会报错。

• 子组件往父组件传值，通过emit事件
  在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
  

每个Vue实例都实现了事件接口: 使用on(evntName)监听事件 ; 使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>
<script>
export default {
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

这样就基本实现了子组件向父组件发送值了

##不同组件之间传值，通过eventBus

定义一个新的vue实例专门用于传递数据，并导出

import Vue from 'vue'
export default new Vue()
//新建vue实例

定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件

import eventBus from './eventBus.js'
...
eventBus.$emit('key',value )

接收传递过来的数据

import eventBus from './eventBus.js'
...
eventBus.$on('key',function(value){...} )