- 原本:父组件使用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>