常见vue组件间的参数的传递

常见vue组件间的参数的传递

父组件给子组件传值：

父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息

vue父子组件的关系可以概括为：

父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息

可以理解为：

1).父组件—>子组件：父组件传值给子组件使用Props属性
2).子组件—>父组件：子组件传值给父组件使用Emit事件。
父组件：部分代码如下：

export default {  
  props: ['showDate']  
}

子组件：子组件触发事件$emit(‘test’)

export default {  
  props: ['showDate']  ,
  methods:{
   test:function(){
    this.$emit("test")
  }
  }
}

父组件监听事件：部分代码如下：

export default {  
  data(){
   return {
     showDate:'abc'
   }
  },
  methods:{
    parentEvent:function(){
        this.showDate='new abc'
    }
  }
}

非父子组件间的数据传递：

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

基本传参props

传递数据

在子组件中

<child age={this.state.age}>

this.props.age获取数据
传方法

setAage = v =>this.setState({age:v})
<child age={this.state.age} setAge={this.setAge.bind(this)}>

**在子组件使用**

<h3 onClick={()=>this.props.setAge(15)}>