Vue cli传递数据

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

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

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

子组件Nav.Vue添加：

?

1 2 3 4

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

　　

父组件Home.Vue：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<Nav @getCity="getCity"></Nav>    data(){     return {       city:""     }   },   methods:{     getCity:function (city){        console.log(city)        this.city = city;     },     }

　　

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

 

 

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

Home.Vue组件：

?

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

　　

子组件Forecast.Vue：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

props: {  // 接收来自父组件的数据    choose_city: {      default:"北京",      type: String,    }  },    watch: {    choose_city() {        this.city = this.choose_city        this.get_weather();    },  },