<template>

    <div class="v-title">

        <div>

            <span>{{title}}</span>

        </div>

    </div>

</template>        

<script>

export default{

props:['title'],  //声明title

data (){

    return {}

  }

}

</script>

<template>

    <div class="app">

        <vHeader :title="Name"></vHeader> //在这里传值给子组件

    </div>

</template>        

<script>
import vHeader from '@components/header/v-header' //注册header组件

export default{
components:{vHeader}, //注册header组件

data (){

    return {
       Name:'我是首页'  //最终显示在app.vue的title就是这个
    }

  }

}

</script>

this.$emit(event,...args);

/* event: 要触发的事件

    args: 将要传给父组件的参数*/ 

<template>

<div class="app">

　　<city @changeCity="changeCityName"></city>

</div>

</template>

<script>
import city from '@/components/city' //把子组件city导入
export default{

data (){

    return {
    }

  },
methods:{
   changeCityName(val){
   this.name=val
  }
 }
}

</script>

<template>

<div class="city">

　　<city>{{changecity}}</city>

</div>

</template>

<script>

export default{

data (){

    return {

    }

  },
compute:{      //选中子组件里的值，赋给父组件
  this.name=this.cityname;
  return this.name
},

methods:{

 changeCity(val){

    this.name=val;

    this.$emit('changeCity',this.name);  //把子组件的值传给父组件

   }

 }

}

</script>