Vue父子组件间的传值

 直接上代码

父组件

<template>
  <div id="app">
    <div>
      父组件的值：
      <input type="text" v-model="city"/>
      <button @click="changeCity">父组件来改变</button>
    </div>
    <urban @changeCityName="updateCity" :sendData="city"></urban>
  </div>
</template>

<script>
import urban from "./urban";
export default {
  name: 'App',
  components: {urban},
  data () {
    return {
      city:"北京"
    }
  },
  methods:{
    //父组件自己的方法
    changeCity(){
      this.city='上海'
    },
    //接收子组件传过来的值
    updateCity(childData){    //触发子组件城市选择-选择城市的事件
      this.city = childData.cityName;//改变了父组件的值
    }
  }
}
</script>

子组件

<template>
  <div>
    <br/>
    父组件传给子组件的值:
    <input type="text" v-model="sendData"/>
    <button @click='childSend'>子组件来改变</button>
  </div>
</template>

<script>
    export default {
     name: "urban",
      data(){
       return{
         childData : {
           cityName: '广州'
         }
       }
      },
     props:['sendData'], // 用来接收父组件传给子组件的数据
     methods:{
       childSend() {
        this.$emit('changeCityName',this.childData);   //select事件触发后，自动触发showCityName事件,将方法和值发送给父组件
      }
    }
    }
</script>