轉載：https://blog.csdn.net/xr510002594/article/details/83304141
一、父組件傳子組件，核心--props
在這里觸發 handleClick 點擊事件，額外聲明一個clickData，點擊按鈕將 inpMessage 的值賦給 clickData ，再傳給子組件
父組件index.vue
<template>
<div>
<input type="text" v-model="inpMessage">
<button @click="handleClick">點擊傳給子組件</button>
<children :message="clickData" /> //message為子組件props接收的值，clickData為父組件要傳的值
</div>
</template>
<script>
import children from './page/children'
export default {
name: "index",
components:{
children
},
data(){
return{
inpMessage:'',
clickData:''
}
},
methods:{
handleClick(){
//賦值
this.clickData = this.inpMessage
},
}
}
</script>
子組件代碼：watch監聽法
<template>
<div>
<input type="text" v-model="childrenMessage">
<!--<button @click="childClick">傳值給父組件</button>-->
</div>
</template>
<script>
export default {
name: "children",
props:{
message:String
},
data(){
return{
childrenMessage:''
}
},
created(){
this.childrenMessage=this.message
},
//這里用watch方法來監聽父組件傳過來的值，來實現實時更新
watch:{
message(val){ //message即為父組件的值，val參數為值
this.childrenMessage = val //將父組件的值賦給childrenMessage 子組件的值
}
}
}
</script>
二、子組件傳父組件，核心--$emit，這里附上完整父子傳值的代碼,vue是不允許子組件向父組件傳值去改變父組件的值的，但是我們可以通過自定義事件的形式去改變值，例如點擊事件，再通過$emit來傳遞，代碼注釋中有介紹。
父組件代碼如下：
<template>
<div>
<input type="text" v-model="inpMessage">
<button @click="handleClick">點擊傳給子組件</button>
//@messageData為子組件聲明傳遞過來的值，函數，getData為函數，val參數是傳遞過來的值
<children :message="clickData" @messageData="getData"/>
</div>
</template>
<script>
import children from './page/children'
export default {
name: "index",
components:{
children
},
data(){
return{
inpMessage:'',
clickData:''
}
},
methods:{
handleClick(){
this.clickData = this.inpMessage
},
//接收子組件傳遞的值，val參數是傳遞過來的值 ，給inpMessage 賦值，子組件改變父組件的值
getData(val){
this.inpMessage = val
console.log(val)
}
}
}
</script>
子組件代碼如下：
<template>
<div>
<input type="text" v-model="childrenMessage">
<button @click="childClick">傳值給父組件</button>
</div>
</template>
<script>
export default {
name: "children",
props:{
message:String
},
data(){
return{
childrenMessage:''
}
},
created(){
this.childrenMessage=this.message
},
methods:{
//點擊傳值給父組件，通過$emit傳遞，第一個參數messageData相當於傳播的媒介，this.childrenMessage為需要傳遞的值，后面也可以傳遞多個參數
childClick(){
this.$emit('messageData',this.childrenMessage)
console.log(this.childrenMessage)
}
},
watch:{
message(val){
this.childrenMessage = val
}
}
}
</script>