vue之prop与$emit的用法说明

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

<template>
  <div>
    <div>search</div>
    <input type="text" v-model="searchKey.key_apple">
    <input type="text" v-model="searchKey.key_blackBerry">
    <button @click="onSubmit">确定</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: {
        key_blackBerry: "",
        key_apple: ""
      }
    };
  },
 
  methods: {
    onSubmit() {
      this.$emit("onSearchSubmit", this.searchKey);
    }
  }
};
</script>

<template>
  <section class="container">
    <div>
      <Search @onSearchSubmit="onSearchSubmit"/>
      <h1>{{parent_search}}</h1>
    </div>
  </section>
</template>

<script>
import Search from "~/components/Search.vue";
 
export default {
  components: {
    Search
  },
 
  data() {
    return {
      parent_search: {}
    };
  },
 
  methods: {
    onSearchSubmit(input) {
      this.parent_search = input;
    }
  }
};
</script>

<template>
  <div>
    <div>search</div>
    <input type="text" v-model="searchKey.key_apple">
    <input type="text" v-model="searchKey.key_blackBerry">
    <button @click="onSubmit">确定</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: {
        key_blackBerry: "",
        key_apple: ""
      }
    };
  },
 
  methods: {
    onSubmit() {
      const input = JSON.parse(JSON.stringify(this.searchKey));
      this.$emit("onSearchSubmit", input);
    }
  }
};
</script>