vue组件数据双向绑定

零凌林

已于 2024-11-08 20:14:53 修改

阅读量4.4k

点赞数 2

分类专栏： vue2的世界文章标签： html 前端

于 2022-10-09 14:36:43 首次发布

本文链接：https://blog.youkuaiyun.com/yxlyttyxlytt/article/details/127226049

版权

vue2的世界专栏收录该内容

14 篇文章

订阅专栏

双向绑定方式

v-model

父组件=>子组件 ( 父组件的昵称传递给子组件)

父:

<update-name v-model="user.name" @close="isShowUpdateName = false" />

子:

props: {
    value: {
      type: String,
      required: true
    }
  }
data() {
    return {
      localName: this.value
    };
  },

子组件=>父组件    input为vue2中内置的属性

this.$emit("input", this.localName);

其中v-model传递给子组件的prop默认名称为value,事件默认为input,如果想要修改这两个默认值,可以使用model来重新指定,如上面的例子中,指定v-model传递给子组件的名称为msg,事件为change

props: {
        msg: String
    },
model: {
        prop: 'msg',
        event: 'change'
    },
methods：{
        handleChange(){
        this.$emit("change", this.localName);
    }
}

.sync

父:

<updateGender
        v-if="isShowUpdateGender"
        :gender.sync="user.gender"
        @close="isShowUpdateGender = false">
</updateGender>

子：

 props: {
    gender: {
      type: Number,
      required: true
    }
  },

子传父:

 this.$emit('update:gender', this.localGender)

vue3取消了.sync这种语法，使用v-model:title 语法代替

// 父组件
<template>
    <div>
        我是父子组件之间同步的数据{{data}}
// 父组件传递给子组件title属性(默认使用value)
// 通过update:title(默认使用update:value) 方法将子组件传递的值赋值给data
        <child v-model:title = data></child>
    </div>
</template>
<script>
    data(){
      return {
        data:'我是来自父组件的数据'
      }
    }
</script>

//子组件
<template>
  <div>
    <button @input="childDataChange">{{title}}</button>
  </div>
</template>
 
<script>
    props:{
      title:{
        default:'',
        type:String
      }
    },
    methods:{
      childDataChange(v){
        this.$emit('update:title',v) // 触发update:data将子组件值传递给父组件
      }
    }
</script>

vue3允许写多个v-model,vue2不允许写多个v-model

//父组件
<template>
    <div>
        <child v-model:value1='dValue1' v-model:value2='dValue2'></child>
        // 等价于 默认给子组件传递两个值value1、value2
        // 子组件更新函数update:value1将接受到的参数赋值给dValue1
        // 子组件更新函数update:value2将接受到的参数赋值给dValue2
        <child :value1='dValue1' @update:value1='val=>{ dValue1= val }'
               :value2='dValue2' @update:value1='val=>{ dValue2= val }'
        ></child>
    <div/>
</template>
<script>
data() {
      return {
        dValue1: '父组件的数据1',
        dValue2: '父组件的数据2' 
      }
    }
</script>

拓展

vue双向绑定的优势？

Vue.js的双向绑定（Two-Way Data Binding）是一种数据绑定技术，它允许数据的自动同步，即当数据发生变化时，视图会自动更新，反之亦然。Vue.js的双向绑定具有以下优势：

简化开发：双向绑定可以简化开发，减少代码量。开发者不需要手动编写代码来同步数据模型和视图，Vue.js会自动处理这些操作。

提高开发效率：双向绑定可以减少开发者的工作量，提高开发效率。开发者可以专注于业务逻辑的实现，而不需要花费大量时间来处理数据同步的问题。

提高代码的可读性和可维护性：双向绑定使得代码更加清晰和易于理解。开发者可以清楚地看到数据模型和视图之间的关联，从而更容易理解和维护代码。

减少错误：双向绑定可以减少由于手动同步数据模型和视图而导致的错误。由于Vue.js会自动处理数据同步，因此可以避免由于手动操作而导致的错误。

提高用户体验：双向绑定可以提供更好的用户体验。当用户在视图中进行操作时，数据模型会自动更新，从而实现即时反馈。这种即时反馈可以增强用户的体验感，提高用户的满意度。