父子组件通信

//父组件

<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>
上一篇:SpringBoot--前端页面与后端的调用连接(Thymeleaf模板引擎)


下一篇:vue自动获取input焦点