提出问题
实现下图功能，点击 子组件 的按钮，可以修改 父组件 的数据，根据 vue教程-props单向数据流 可知，不能直接修改
解决
通过 自定义事件 的方式，来实现 子组件 操作 父组件的数据
代码流程图：
- 子组件的
click事件，触发函数 - 子组件的事件函数，通过调用
$emit触发自定义事件 - 父组件中，使用子组件，并添加自定义事件
- 父组件监听到 该自定义事件后，调用相应的函数
创建子组件
在 components 目录下创建 UserInfo5.vue 文件
在子组件中 添加 按钮，并增加 click 事件，让其触发 changeName 自定义事件
内容如下：
<template>
<div class="app">
<div>{{msg}}</div>
姓名：<input type="text" v-model="name">
<input type='button' value='点击' @click='doChange'>
</div>
</template>
<script>
export default {
data:function(){
return {
msg:'子组件（通过自定义事件，实现子组件传递数据给父组件）',
name:'韩梅梅'
}
},
methods:{
doChange:function(){
//触发 changeName 事件
this.$emit("changeName",this.name)
}
}
}
</script>
<style scoped>
/* 关键：没有写 scoped */
.app{
border: red 1px solid;
}
</style>
关键： 在子组件中定义 点击事件，通过调用 $emit() 方法 触发自定义事件
$emit()参数：
changeName： 是 自定义事件名称，表示：点击该按钮时，触发 自定义 事件 ，父组件会 监听到 该事件this.name：是要传递的数据
修改 App.vue
使用 子组件，并添加 changeName 自定义事件，当 父组件 监听到该事件时，就调用 doChangeName 函数
内容如下：
<template>
<!-- 模板 -->
<div id="app">
父组件，姓名：{{showName}}
<user-info @changeName="doChangeName"/>
定义 changeName 事件，当触发该事件时，调用doChangeName() 函数
</div>
</template>
<script>
import UserInfo from './components/UserInfo5'
export default {
name: 'App',
components: {
'user-info':UserInfo, //注册局部组件
},
data:function(){
return {
showName:'李雷'
}
},
methods:{
doChangeName:function(name){
this.showName=name
}
}
}
</script>