父子组件通信

//父组件

<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>
posted @ 2021-08-02 13:27  好命先生w  阅读(30)  评论(0)    收藏  举报