vue prop始终是子组件内部的默认值

Question

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

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的子组件中，我所有的道具都设置为默认值，并且没有采用传递的道具值。

Answer 1

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