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

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

解决：在子组件中加入 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