怎么实时拿到父组件v-model里的值并传递给子组件作为子组建的参数
时间: 2023-11-30 07:05:05 浏览: 102
巧妙运用v-model实现父子组件传值的方法示例
你可以使用 `watch` 监听父组件 `v-model` 值的变化,并将新的值传递给子组件作为参数。具体实现如下:
父组件:
```vue
<template>
<div>
<input v-model="value" />
<ChildComponent :param="value" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
value: '',
}
},
watch: {
value(newValue) {
// 监听 v-model 值的变化,将新的值传递给子组件
this.$nextTick(() => {
this.$refs.childComponent.setParam(newValue);
});
},
},
}
</script>
```
子组件:
```vue
<template>
<div>{{ param }}</div>
</template>
<script>
export default {
props: {
param: {
type: String,
default: '',
},
},
methods: {
setParam(newParam) {
this.param = newParam;
},
},
}
</script>
```
在父组件中,我们使用 `watch` 监听 `value` 的变化,当 `value` 发生变化时,我们将新的值通过 `setParam` 方法传递给子组件。注意,我们使用了 `$nextTick` 方法来保证在 DOM 更新后再传递参数,以避免出现意外的错误。
阅读全文