Vue cli传递数据

Nav组件和Forecast组件都是Home组件的子组件。

（1）子组件传递数据给父组件

在子组件中，通过this.$emit('自定义事件名', 参数1,参数2,...)来调用父组件中定义的事件.

子组件Nav.Vue添加：

 watch:{
    city(){
      this.$emit("getCity",this.city);
    }

　　

父组件Home.Vue：

<Nav @getCity="getCity"></Nav>

 data(){
    return {
      city:""
    }
  },
  methods:{
    getCity:function (city){
       console.log(city)
       this.city = city;
    },

  }

　　

注意：子组件中往父组件传递数据，属于单向数据量。

 

 

（2）父组件的数据传递给子组件

Home.Vue组件：

<Forecast :choose_city="city"></Forecast

　　

子组件Forecast.Vue：

 props: {  // 接收来自父组件的数据
    choose_city: {
      default:"北京",
      type: String,
    }
  },

  watch: {
    choose_city() {
        this.city = this.choose_city
        this.get_weather();
    },
  },