父传子，通过props
子传父，通过$emit

App.vue

<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件<!-- 1.给组件标签，添加属性方式 赋值 --><!-- 添加属性传值 --><!-- @监听数据changeTitle，当监听到子组件向父组件通过$emit传入了changeTitle这个参数时，触发handlechange函数 --><Son :dodemoi="myTitle" @changeTitle="handlechange"></Son></div>
</template><script>
import Son from "./components/Son.vue"
export default {name: "App",components: {Son,},data() {return {myTitle: "前端",}},methods:{handlechange(title){this.myTitle = title;}}
}
</script><style>
</style>

Son.vue

<template><div class="son" style="border:3px solid #000;margin:10px"><!-- 3.直接使用props的值 -->{{dodemoi}}<button @click = "changeFn">修改</button></div>
</template><script>
export default {name: 'Son-Child',// 2.通过props来接受props:['dodemoi'],methods:{changeFn(){//通过$emit，发送通知//左边是参数名称，右边是参数值this.$emit('changeTitle', '已修改');}}}
</script>
<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

效果

鼠标点击修改，页面会显示已经修改。

鼠标点击后：