首页v-model实现组件通信

v-model实现组件通信

时间: 2025-01-29 11:50:27 浏览: 30

### 使用 `v-model` 实现 Vue 组件间的通信 #### 定义父组件与子组件的关系在 Vue 中，`v-model` 提供了一种简洁的方式用于处理父子组件之间的数据传递。当在一个自定义组件上使用 `v-model` 时，默认情况下会把该属性绑定到名为 `value` 的 prop 上，并监听来自子组件发出的 `input` 事件来同步状态。对于更复杂的需求，则可以通过显式声明 model 属性来自定义所使用的 prop 和 event 名称[^2]。 ```html  <template> <div class="child-component">  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> </div> </template> <script> export default { props: ['modelValue'], // 接收父级传来的值 } </script> ``` ```html  <template> <div class="parent-component">  <ChildComponent v-model:value="message"/> <p>Message from child component is: {{ message }}</p> </div> </template> <script> import ChildComponent from './components/ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello' } } }; </script> ``` 在这个例子中： - 当用户修改 `<ChildComponent>` 内部的输入框内容时，触发了 `$emit('update:modelValue')` 方法通知父组件更新其本地的状态变量 `message`。 - 同样地，在父组件里通过改变 `message` 变量也会自动反映给子组件内的显示内容。这种机制使得开发者能够轻松创建可重用性强且易于维护的小型模块化部件，同时也简化了表单控件和其他交互元素的设计过程[^3]。

阅读全文