vue组件之间的双向绑定

最新推荐文章于 2025-06-30 15:07:46 发布

原创最新推荐文章于 2025-06-30 15:07:46 发布 · 909 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍Vue.js中实现双向数据绑定的三种方法：model选项、通过prop和自定义事件、以及sync修饰符。每种方法都附带了详细的代码示例，帮助开发者理解和掌握在父组件与子组件间进行数据同步的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：model 选项

//父组件代码：
<template>
  <div>
    <child v-model="num"></child>{{num}}
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  },
  data(){
    return {
      num:0
    }
  }
};
</script>


//子组件代码：
<template>
  <div>
    <input type="text" :value="data" @input="change">
  </div>
</template>
<script>
export default {
  model: {
    prop: "data",
    event: "on-change"
  },
  props: {
    data: Number
  },
  methods: {
    change(event) {
      this.$emit("on-change", Number(event.target.value));
    }
  }
};
</script>

父组件的v-model指令所绑定的属性num通过model选项传递给子组件的data属性，子组件通过自定义事件改变父组件的num属性。

model选项的参数意义：

prop：指定父组件双向绑定子组件的哪个属性。

event：指定触发双向绑定的事件名

方法二：通过prop和自定义事件

//父组件代码：
<template>
  <div>
    <child :data="num" @on-change="num=$event"></child>{{num}}
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  },
  data(){
    return {
      num:0
    }
  }
};
</script>

//子组件代码：
<template>
  <div>
    <input type="text" :value="data" @input="change">
  </div>
</template>
<script>
export default {
  props: {
    data: Number
  },
  methods: {
    change(event) {
      this.$emit("on-change", Number(event.target.value));
    }
  }
};
</script>

方法三：sync修饰符

//父组件代码：
<template>
  <div>
    <child :data.sync="num"></child>{{num}}
  </div>
</template>

<script>
import child from './child'
export default {
  components:{
    child
  },
  data(){
    return {
      num:0
    }
  }
};
</script>

//子组件代码：
<template>
  <div>
    <input type="text" :value="data" @input="change">
  </div>
</template>
<script>
export default {
  props: {
    data: Number
  },
  methods: {
    change(event) {
      this.$emit("update:data", Number(event.target.value));
    }
  }
};
</script>

方法三其实是方法二的一种简写：

父组件中

<child :data.sync="num"></child>

相当于

<child :data="num" @update="num=$event"></child>

注意：在方法三中，带有 .sync 修饰符的 v-bind 指令不能和表达式一起使用 (例如 :data.sync=”num + ‘!’” 是无效的)。你只能提供你想要绑定的属性名，这类似 v-model指令