教程开始：
我们要实现的效果是：在子组件的Input框输入，父组件中实时更新显示。(也就是把子组件中的数据传给父组件)
一、子组件代码
template部分
<template>
<section>
<input v-model="message"/>
</section>
</template>
js部分
<script>
export default {
data(){
return {
message:'请输入'
}
},
//通过watch来监听message是否改变
watch:{
'message':function(){
this.$emit('getMessage',this.message);//主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
}
}
}
</script>
其实不一定要用wacth来监听数据变化，直接给input加个输入事件，也是可以的。
二、父组件代码
template部分
<template>
<div id="app">
<!--getMessage是子组件那边定义的 自定义事件-->
<test @getMessage="getVal"></test>
<div>
子组件输入的值:{{chindVal}}
</div>
</div>
</template>
js部分
<script>
import test from './components/header'
export default {
data(){
return {
chindVal:'',
}
},
components:{
test
},
methods:{
getVal(msg){//msg就是传过来的数据了 这只是个形参 名字可以随意
this.chindVal=msg;//然后将数据赋值给chindVal
}
}
}
</script>
总结：
1.子组件传参给父组件主要是通过$emit方法来实现的。
2.在子组件中使用$emit方法，一般它接受两个参数，第一个是自定义事件(这个事件在父组件中需要用到)，第二个参数就是需要传的数据了。
3.而在父组件里，在调用的标签上引用子组件定义的那个事件，然后事件绑定一个函数。在函数里面进行赋值即可。