V-model 传参组件：父子传参的终极解决方案

2024-01-31 05:14:00

当您在使用 Vue.js 时，您经常需要在父子组件之间传递数据。传统的父子传参方法可以很繁琐，需要您在父组件中定义一个方法，然后在子组件中调用该方法，但使用 V-model，您可以轻松地实现父子组件之间的双向数据绑定，从而简化父子组件之间的通信。

V-model 是什么？

V-model 是 Vue.js 中的一个内置指令，它允许您在表单元素和 Vue.js 数据属性之间创建双向数据绑定。这意味着当您在表单元素中输入内容时，Vue.js 会自动更新相应的 Vue.js 数据属性，反之亦然。

如何使用 V-model 进行父子传参？

为了使用 V-model 进行父子传参，您需要在父组件中定义一个数据属性，然后在子组件中使用 V-model 将该数据属性绑定到表单元素。这样，当您在子组件中输入内容时，Vue.js 会自动更新父组件中的数据属性，反之亦然。

示例

以下是一个使用 V-model 进行父子传参的示例：

<!-- 父组件 -->
<template>
  <div>
    <input v-model="message">
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      message: this.message
    }
  }
}
</script>