vue组件间的参数传递

1. 父组件与子组件传值

组件（Component）是Vue.js的核心部分，组件的作用域是孤立的，所以不能在子组件模板内直接引用父组件的数据，但是组件之间的通信是必不可少的。组件A在其模板中使用了组件B，A组件要向B组件传递数据，B组件要将其内部发生的事情告知A组件，那么A、B组件怎么进行通信呢？
Vue.js父子组件的关系可以总结为props down，events up，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息，它们的工作方式如下图所示：

image

Vue.js父子组件的关系可以总结为props down，events up，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息，它们的工作方式如下图所示：

1).父组件--->子组件：父组件传值给子组件使用Props属性
2).子组件--->父组件：子组件传值给父组件使用Emit事件。

1)示例

//父组件自定义属性 :showDate 
<index-header :showDate="showDate"></index-header>
//子组件显示声明需要的数据showDate 
export default {  
  props: ['showDate']  
}

2.示例

//子组件分发事件$emit('test')
<button @click='test'>click</button>
<p>{{showDate}}</p>
export default {  
  props: ['showDate']  ,
  methods:{
   test:function(){
    this.$emit("test")
  }
  }
}
//父组件监听事件 @test
<index-header :showDate="showDate" @test="parentEvent"></index-header>
export default {  
  data(){
   return {
     showDate:'abc'
   }
  },
  methods:{
    parentEvent:function(){
        this.showDate='new abc'
    }
  }
}

2.非父子组件间的数据传递（兄弟组件传值）

1).eventBus(主要是现实途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。)
2).当组件比较复杂需要传递的数据比较多的时候可以使用vuex来管理。