vue父子组件传值

1、父组件向子组件传值

例如app.vue是父组件，v-header.vue是子组件，实现app向v-header传值父组件需要自定义自己的title值，

子组件v-header内容

<template>
    <div class="v-title">
        <div>
            <span>{{title}}</span> 
        </div>
    </div>
</template>        

<script>
export default{
props:['title'],  //声明title
data (){
    return {}
  }
}
</script>

父组件app.vue内容

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

2、子组件向父组件传值

$.emit用法

this.$emit(event,...args);
/* event: 要触发的事件
    args: 将要传给父组件的参数*/ 

父组件app.vue内容

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

子组件city.vue内容

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