一切福田，不離方寸，從心而覓，感無不通。

Vue 子组件与父组件之间的 双向数据绑定

方法一（常规）

  1. 父组件传递数据到子组件；
  2. 子组件将数据转成本地数据

1
2
3
4
5
6
props: ['name'],
data() {
    return {
        iName: this.name
    }
},

 

  1. 但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；

1
2
3
4
5
6
watch: {
    // 监听父组件传入的数据，更新到本地
    name(newVal, oldVal){
        this.iName = newVal;
    }
},

 

  1. 此时，父组件更新 name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 子组件中的监听
watch: {
    // 监听父组件传入的数据，更新到本地
    name(newVal, oldVal){
        this.iName = newVal;
    },
    // 监听本地数据的变化，通知父组件更新
    iName(newVal, oldVal) {
        this.$emit('update', newVal);
    }
},
 
// 父组件中的更新
<test :name="name" @update="update"/>
methods: {
    update(str) {
        this.name = str;
    }
},

 

方法二（自定义 v-model 双向数据绑定）

自定义组件中使用 v-model 进行双向数据绑定，相当于；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<test v-model="selected" />
相当于
<test :value="selected" @input="data=> selected=data"/>
 
 
所以子组件需要做的事情就是
1.  接收 value 数据
    props: ['value'],
2.  将value 转成本地数据
data() {
    return {
        checked: this.value
    }
},
3. 监听 value 的变化，更新到本地数据，
   监听 本地数据的变化，使用 input 事件通知父组件更新
watch: {
    value(newVal){
        this.checked = newVal;
    },
    checked(newVal){
        this.$emit('input', newVal)
    }
},

 

方法三（.sync 修饰符）

1
<input :title.sync="xx"/>

 

拆开后

1
<input @update:title="data => xx=data" :title="xx"/>

 

 

from:https://blog.csdn.net/qq_39125684/article/details/90380268

Copyright © 2024 Longsheng All rights reserved.