vue父组件数据更新，子组件未更新

迈不过友情╰ 2022-10-16 07:49 246阅读 0赞

> 父组件中数据更新了，但子组件中数据并为更新响应视图的变化

解决：在子组件中加入 `watch` 进行数据监听

父组件

<RiskLevel :level="level" @getVal="getRiskVal"></RiskLevel>
    
    ...
    getRiskVal(val) { 
      this.newRuleInfo.risk_level = val
    }
    ...

子组件

<template>
      <el-select v-model="localLevel" placeholder="请选择"@change="change">
        <el-option v-for="item in levelList" :key="item.value" :label="item.name" :value="item.value"></el-option>
      </el-select>
    </template>
    
    <script>
    export default { 
      props: { 
        level: { 
          type: Number
        }
      },
      data() { 
        return { 
          levelList: [
            { 
              name: '0',
              value: 0
            },
            { 
              name: '1',
              value: 1
            },
            { 
              name: '2',
              value: 2
            },
            { 
              name: '3',
              value: 3
            },
            { 
              name: '4',
              value: 4
            }
          ],
          localLevel: this.level
        }
      },
      watch: {  // watch 监听 props 中的值
        level(newVal, oldVal) {  // newVal 为新值， oldVal 为旧值
          this.localLevel = newVal
        }
      },
      mounted() { 
        this.localLevel = this.level
      },
      methods: { 
        change(val) { 
          this.$emit('getVal', val)
        }
      }
    }
    </script>

### 补充 ###

vue 中的自定义组件 v-model