使用默认的value、input
父亲组件:
<template> <div> <input type="text" v-model="keyWords"> <child v-model="keyWords"></child> </div></template><script>import child from './child';export default { components: { child, }, data() { return { keyWords: '', }; },};</script>
子组件:
<template> <div> <input type="text" :value="value" @input="$emit('input', $event.target.value)"> </div></template><script>export default { props: { value: { type: String, default: '', }, },};</script>
使用model选项改变默认的value、input
父亲组件:不变
子组件:
<template> <div> <input type="text" :value="inputValue" @input="$emit('changeValue', $event.target.value)"> </div></template><script>export default { model: { prop: 'inputValue', event: 'changeValue', }, props: { inputValue: { type: String, default: '', }, },};</script>