原本:父组件使用props传值给孩子组件初始化,触发事件子组件使用$emit传值给父组件,很麻烦 后来:使用computed和$event 例子代码:
< template>
< div class = "box" >
grandpa < el- input v- model= "model.title" > < / el- input>
< Father : titleProp= "model.title" @handleInput: titleProp= "model.title = $event" / >
< / div>
< / template>
< script>
import Father from "./Father.vue" ;
export default {
data ( ) {
return {
model : {
title : "" ,
} ,
} ;
} ,
components : {
Father,
} ,
methods : {
handleInput ( val ) {
this . model. title = val;
} ,
} ,
} ;
< / script>
< template>
< div class = "father" ref= "father" >
father < el- input v- model= "title" > < / el- input>
< / div>
< / template>
< script>
export default {
computed : {
title : {
get ( ) {
return this . $props. titleProp;
} ,
set ( value) {
this . $emit ( "handleInput:titleProp" , value) ;
} ,
} ,
} ,
props : {
titleProp : String,
} ,
methods : { } ,
} ;
< / script>