实现vue父子组件中数据双向绑定

最新推荐文章于 2025-07-09 16:11:33 发布

原创最新推荐文章于 2025-07-09 16:11:33 发布 · 1.5w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-model #vue指令

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍三种Vue组件间通信的方法：第一种，父组件通过props向子组件传递数据，并提供方法更新；第二种，父组件监听子组件emit事件更新数据；第三种，使用v-model实现双向绑定。

第一版

实现思路如下：

父组件通过props向子组件传递数据，并向子组件提供一个方法更新自己的数据。
子组件中当数据更新时，调用父组件提供的方法，将更新之后的数据传递给父组件。

// 父组件 app.vue
<template>
  <my-input :msg="msg" :updateMsg="updateMsg"/>
</template>
<script>
import myInput from './my-input.vue';
export default {
  name: 'app',
  components: { myInput },
  data () {
    return { msg: '' }
  },
  methods: {
    updateMsg (msg) {
      this.msg = msg;
    }
  }
}
</script>

// 子组件 my-input.vue
<template>
  <div>
    <input type="text" :value="msg" @input="e => this.updateMsg(e.target.value)">
  </div>
</template>
<script>
export default {
  name: 'my-input',
  props: {
    msg: String,
    updateMsg: Function
  }
}
</script>

第二版

实现思路如下：

父组件通过props向子组件传递数据，并监听子组件emit的事件，在emit事件的回调中更新自己的数据。
子组件中当数据更新时，向父组件emit一个事件，将更新之后的数据传递给父组件。

// 父组件 app.vue
<template>
  <my-input :msg="msg" @input="msg => this.msg = msg"/>
</template>
<script>
import myInput from 'my-input.vue';
export default {
  name: 'app',
  components: { myInput },
  data () {
    return { msg: '' }
  }
}
</script>

// 子组件 my-input.vue
<template>
  <input type="text" :value="msg" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  name: 'my-input',
  props: { msg: String }
}
</script>

第三版

实现思路如下：

父组件通过props向子组件传递数据，使用vue指令v-model实现父子组件数据的双向绑定。
子组件中当数据更新时，向父组件emit一个input事件，将更新之后的数据传递给父组件。

// 父组件 app.vue
<template>
  <my-input :msg="msg" v-model="msg"/>
</template>
<script>
import myInput from './my-input.vue';
export default {
  name: 'app',
  data () {
    return { msg: '' }
  }
}
</script>

// 子组件 my-input.vue
<template>
  <input type="text" :value="msg" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  name: 'my-input',
  props: ['msg']
}
</script>