1、vue元件Prop傳遞資料：

 元件例項的作用域是孤立的，這意味著不能在子元件的模板內直接引父元件的資料，如果要讓子元件使用父元件的資料，則需要通過子元件的prop選項；prop是單向繫結的，當父元件的屬性變化時，將傳遞給子元件，但是反過來不行；這樣主要是防止子元件無意修改父元件的狀態；每次父元件更新時，子元件的所有prop都會更新為最新值。這意味著你不能在子元件內部改變prop。

2、子元件可以使用 $emit 觸發父元件的自定義事件。

vm.$emit( event, arg )：傳送資料，第一個引數是傳送資料的名稱，接收時還用這個引數接收，第二個引數是這個資料現在的位置

拓展：

vm.$on( event, fn )：接收資料，第一個引數是資料的名稱，與傳送時的名字對應，第二個引數是一個方法，要對資料的操作

父元件：

<template>
  <div>
     <div>父元件的addName：{{addrName}}</div>
    <child-prop @showAddrName="updateAddrName" :sendData="addrName"></child-prop>
  </div>
</template>

<script>
  import childProp from "./childProp";
  export default {
    name:'index',
    components: {childProp},
    data () {
      return {
        addrName:"北京"
      }
    },
    methods:{
      updateAddrName(data){//觸發子元件城市選擇-選擇城市的事件
        console.log(data);
        this.addrName = data.addrName;//改變了父元件的值
        console.log('toCity:'+this.addrName)
      }
    }
  }
</script>
 

子元件：

<template>
  <div>
    <h3>父元件傳給子元件的addrName:{{sendData}}</h3>
    <br/><button @click='addr(`上海`)'>點選此處將‘上海’發射給父元件</button>
  </div>
</template>
<script>
  export default {
    name:'childProp',
    props:["sendData"], // 用來接收父元件傳給子元件的資料
    methods:{
      addr(val) {
        let data = {
          addrName: val
        };
        this.$emit('showAddrName',data);//select事件觸發後，自動觸發showCityName事件
      }
    }
  }
</script>