vue prop 始终是子组件中的默认值答案

【问题标题】：vue prop is always the default value inside child compvue prop 始终是子组件中的默认值
【发布时间】：2020-08-22 17:10:25
【问题描述】：

我正在将一堆道具从父组件传递到子组件。在我的子组件中，我为所有道具定义了一个默认值。

Overview.vue (child)

  props: {
    name: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    username: {
      type: String,
      default: ''
    },
    email: {
      type: String,
      required: true,
      default: ''
    },
    phone: {
      type: Number,
      default: null
    },
    status: {
      type: String,
      required: true,
      default: ''
    },
    statusOptions: {
      type: Array,
      default: () => []
    }
  },

我的父母长这样：

UserSettings.vue (parent)

          <overview
            :name="name"
            :username.sync="username"
            :email="email"
            :status="status"
            :status-options="statusOptions"
            @update-username="username = $event"
          />

UserSettings.vue data (parent)

  data() {
    return {
      name: 'John',
      username: 'Nevermind',
      email: 'john.nevermind@okey.com',
      status: 'idle',
      statusOptions: ['idle', 'vacation', 'working']
    }
  }

在我的子组件中，我想将传递的数据保存在我的 data() 中，如下所示：

Overview.vue (child)

  data() {
    return {
      overviewData: {
        username: this.username,
        email: this.email,
        phone: this.phone,
        status: this.status
      }
    };
  },

现在的问题是，在overviewData 的子组件中，我的所有道具都设置为默认值，并且没有采用传递的道具值。

【问题讨论】：

请同时添加设置数据的父代码
从父级添加数据
乍一看一切都很好。这可能是某种缓存问题。尝试刷新页面。如果这不起作用，请在两个 data 函数中输入一些控制台日志，以确认它正在运行最新代码。还可以尝试将默认值更改为空字符串以外的其他值，看看这些值是否仍然与默认值匹配。

标签： javascript vue.js vue-props

【解决方案1】：

我怀疑您在 <overview> 中显示数据的方式存在错误（或以其他方式确定它为空白）。请参阅工作沙箱here。请随时使用概述实现进行编辑，以便我们为您排序。

【讨论】：