父子组件通信
//父组件
<template>
<div>
<div>父组件的toCity{{toCity}}</div>
<navheader @showCityName="updateCity" :sendData="toCity"></navheader>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
toCity: "北京",
};
},
methods: {
updateCity(data) {
//触发子组件城市选择-选择城市的事件
this.toCity = data.cityname; //改变了父组件的值
console.log("toCity:" + this.toCity);
},
},
};
</script>
//子组件
<template>
<div>
<h3>父组件传给子组件的toCity:{{sendData}}</h3>
<br /><button @click='select(`合肥`)'>点击此处将‘合肥’发射给父组件</button>
</div>
</template>
<script>
export default {
name: "trainCity",
props: ["sendData"], // 用来接收父组件传给子组件的数据
created() {
this.select(`合肥`);
},
methods: {
select(val) {
let data = {
cityname: val,
};
this.$emit("showCityName", data); //select事件触发后,自动触发showCityName事件
},
},
};
</script>