父子组件通信

//父组件

<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>