首先先了解组件的嵌套（全局嵌套、局部嵌套）因此传值有3种方式，分别是父-子，子-父
我们先来探讨一下父-子之间的传值：
抛出问题：子组件要获取父组件当中的数据；
我们先倒推：一个普通的组件要获取定义的数据我们看图说话
子组件获取自己本身的数据（name）直接是拿过来{{name}}用；
所以：现在的问题是怎么从不是本身数据拿，
1、在子组件标签自定义一个属性名name1取值为父组件传的值，即：name1=‘title‘,
2、在vue实例子组件内部有一个props取属性名然后在直接用{{name1}}就可以拿到父组件的值了
props：上图
2、子-父之间的传值：子组件数据传到父组件里
首先从两个组件的dom结构与vue中内部组件观察，得知，只有dom里边有父与子的关系，因此利用事件机制的原理，
在子组件标签内定义一个点击事件来发送给父组件数据，同时在父组件标签内的子组件也自定义一个接受数据的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h2>传值</h2>
<v-parent></v-parent>
</div>
<template id="parent">
<div>
<h3>父组件</h3>
<p>接受子组件---{{str}}</p>
<v-child @toparent=‘getval‘></v-child>
</div>
</template>
<template id="child">
<div>
<hr>
<h2>子组件</h2>
<p>{{title}}</p>
<button @click=‘get()‘>发送父组件数据</button>
</div>
</template>
<!-- 利用事件机制原理，dom里边有父与子的关系，因此应该在dom里边操作，达到传值的目的
1、// events EventEmitter - emit(‘事件‘,数据) on(‘事件‘,()＝>)
// Vue.prototype.$emit=EventEmitter.emit
-->
<script>
var app =new Vue({
el:‘#app‘,
components:{
‘v-parent‘:{
template:‘#parent‘,
data(){
return{
str:‘‘
}
},
methods:{
getval(msg){//传过来的实参
console.log(msg);
this.str=msg;
}
},
components:{
‘v-child‘:{
template:‘#child‘,
data(){
return{
title:‘我是被发送子组件‘
}
},
methods:{
get(){
this.$emit(‘toparent‘,this.title)
}
}
}
}
}
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/shiraly/p/11726604.html