父组件：parents.vue
<div style="background:purple;"> <div style="color: white">(父组件){{'这是：'+psonMsg}}</div> <child :message="parentMsg" @sonMsg='showChildMsg'></child> </div> </template> <script> import child from './child ' //引入child组件 export default { data() { return { parentMsg: '父组件的value', psonMsg: '' } }, components: { child }, methods: { showChildMsg(value) { this.psonMsg = value; console.log('value', value) } } } </script> <style> </style>子组件：child.vue
<template> <div style="background:pink;"> <div>(子组件){{'这是：'+message}}</div> <button @click="enter">子传父</button> </div> </template> <script> export default { props: { message: String }, data() { return { sonMsg: '子组件的value' } }, methods: { enter() { this.$emit("sonMsg", this.sonMsg) } } } </script> <style> </style>