怎么实时拿到父组件v-model里的值并传递给子组件作为子组建的参数
时间: 2023-11-30 14:53:36 浏览: 73
可以使用 Vue.js 的 props 和 events 功能来实现父子组件之间的双向绑定。
首先,在父组件中,将 v-model 绑定到一个名为 value 的 prop 上:
```html
<template>
<div>
<input type="text" v-model="inputValue">
<child-component :value="inputValue" @input="inputValue = $event"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
inputValue: ''
}
}
}
</script>
```
在子组件中,将父组件传递过来的 value prop 绑定到一个名为 input 的事件上,并在触发该事件时,通过 $emit 方法将输入的值传递给父组件:
```html
<template>
<div>
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
required: true
}
}
}
</script>
```
这样,当父组件的 inputValue 发生改变时,会实时传递给子组件作为参数,并在子组件中显示。同时,当子组件中的输入框发生改变时,会触发 input 事件,并通过 $emit 方法将输入的值传递给父组件,实现双向绑定。
阅读全文