vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值
一、父组件传子组件，核心–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>
<style></style>
子组件children.vue
<template>
<div>
<input type=“text” v-model=“childrenMessage”>
<!–<button @click=”childClick”>传值给父组件</button>–>
</div>
</template>
<script>
export default {
name: “children”,
props:{
message:String //接收父组件传过来的值，这是稍微高级一点的写法，也可以props:[‘ message’]
},
data(){
return{
childrenMessage:”
}
},
created(){
this.childrenMessage=this.message //初始化时候的赋值
},
}
</script>
<style scoped>
</style>
上面是父组件传值给子组件的过程，最重要的点是props接收，上面是点击事件传值，还有一种场景是动态传值，实时更新父组件的值，自组件动态更新，这里就要用到watch了，附上自组件代码
子组件：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>
<style scoped>
</style>
二、子组件传父组件，核心–$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>
<style></style>
子组件
<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>