关于子组件与父组件v2.0

上一篇我们讲到父组件中引入子组件,这篇文章我们讲父组件和子组件之间如何传值。

1. 父组件往子组件中传值

    父组件将要传的值存入子组件标签上,price在父组件中已定义有值。

    子组件通过 获取值,在props中

export default {
  name:'tabBar',
  data() {
    return {
      priceData:0
    }
  },
  props:["price"],
  created: function(){
      this.priceData=this.price;
      console.log("父组件传过来的值："+this.price);
  }
}

2. 子组件往父组件中传值

    2.1 给子组件设定一个触发传值的事件

我的

    2.2 事件触发的时候我们将从父组件中拿到的 数据稍加改变,使用$emit()传入父组件，函数中的getPrice是父组件的方法名。

    childChange(){
      this.priceData=20;
      this.$emit('getPrice',this.priceData);
    }

    2.3 父组件中的子组件绑定="getData" 方法

    2.4调用getData方法

 getData(data){
      this.price=data;
      console.log("子组件传过来的值:"+this.price)
    }

3. 输出值分别如下

输出数据.png