vue中组件之间相互通信（一）

一、父子组件之间相互通信

父组件：

<template>
<div
id="parent">
<h1>父级组件</h1>
<button
@click="sendMsg">给子组件传递参数</button>
<child
:msg="msg"></child>
</div>
</template>
<script>
import
Child from
'../components/Child'
export
default {
components:{Child},
data(){
return{
msg:null,
}
},
methods:{
sendMsg:function(){
this.msg =
'this is a parent msg'
}
}
}
</script>
子组件：

<template>
<div id="child">
这是子组件：从父组价中传递过来的信息<br>{{msg}}
</div>
</template>
<script>
export default {
props:['msg']
}
</script>

二、子父组件之间相互通信

父组件：

<template>
<div id="parent">
<h1>父级组件</h1>
<child @updateParent="updateParent"></child>
</div>
</template>
<script>
import Child
from '../components/Child'
export default {
components:{Child},
methods:{
updateParent:function(data){
console.log(data)
}
}
}
</script>

子组件：

<template>
<div id="child">
<button @click="sendAAAAA">子传父</button>
</div>
</template>
<script>
export default {
data(){
return{
aaaaa:'this is a Child msg'
}
},
methods:{
sendAAAAA:function(){
this.$emit('updateParent',this.aaaaa)
}
}
}
</script>

以上内容是最近在看过vue的API使用之后的自己理解