一、父子组件之间相互通信
父组件:
<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>