首页vue父子组件v-model数据绑定

vue父子组件v-model数据绑定

时间: 2025-01-15 15:11:14 浏览: 47

### Vue 中父子组件 `v-model` 数据绑定在 Vue.js 中，通过 `v-model` 可以简化父组件与子组件之间的数据传递和更新过程。具体来说： #### 使用 `v-model` 绑定单向数据流当父组件使用 `<Child v-model="countModel" />` 时，实际上是在做两件事[^1]： - 将 `countModel` 的值作为 prop 传递给子组件 - 监听来自子组件的一个自定义事件（默认为 `input`），并将其返回的值赋给 `countModel` 这相当于下面这段代码： ```html <Child :value="countModel" @input="newValue => countModel = newValue"></Child> ``` #### 完整示例展示双向绑定机制为了更清晰地理解这一过程，这里给出一个完整的例子来说明如何利用 `v-model` 实现父子组件间的双向绑定[^2]: **Parent.vue** ```vue <template> <div>  <Son v-model="formData.value"></Son>  <button @click="changeVal">点击变化 value</button>  {{ formData }} </div> </template> <script> import Son from './Son.vue' export default { components: { Son }, name: 'Father', data() { return { formData: {} // 初始化表单对象 } }, watch: { 'formData.value'(val) { console.log('父组件看到的新值:', val); } }, methods: { changeVal() { this.formData.value = '父组件修改后的值'; } } } </script> ``` **Son.vue** ```vue <template> <input type="text" :value="value" @input="$emit('input', $event.target.value)"> </template> <script> export default { props: ['value'] }; </script> ``` 在这个例子中，每当用户输入新的文本时，子组件会触发 `input` 事件并将新值发送回父组件；而父组件则负责接收这个新值并更新自身的状态。

阅读全文