~~~ 子组件 <template> <div> 子组件: <span>{{childValue}}</span> <input type="button" value="点击触发" @click="childClick"> </div> </template> <script> export default { name: "Child", data() { return { childValue:'子组件的数据' } }, methods:{ childClick(){ console.log(this.childValue) this.$emit('childByValue',this.childValue) } } } </script> <style scoped> </style> ~~~ ~~~ 父组件 <template> <div> 父组件: <span>{{name}}</span> <br> <br> <Child :childByValue="childByValue()"></Child> </div> </template> <script> import Child from './Child' export default { name: "Parent", components: { Child }, data() { return { name: '' } }, methods: { childByValue(childValue) { this.name = childValue } } } </script> <style scoped> </style> ~~~