Javascript Vue:设置道具值无效的子组件数据

简单地说，我有两个部分：

• 父组件传递名为“profile”的道具对象
• 接收配置文件道具的子组件

轮廓值是如下所示的对象：

{
  name: "Something",
  email: "some@thing.com"
}

发生了什么事？

export default {
  props: ["profile"],
  data() {
    return {
      email: this.profile.email
    }
  }
}

子组件完美地接收模板中的概要文件值，但似乎无法检索并将其设置为组件数据

目标是什么？

export default {
  props: ["profile"],
  data() {
    return {
      email: this.profile.email
    }
  }
}

我想用配置文件电子邮件道具初始化值“email”

我期待什么？

export default {
  props: ["profile"],
  data() {
    return {
      email: this.profile.email
    }
  }
}

更新

我没有指定电子邮件是用作模型的数据值。 我刚刚尝试删除它，只是在模板中打印电子邮件的值，但它不起作用

从“./services/api/Auth”导入身份验证；
从“./组件/对话框设置”导入对话框设置；
导出默认值{
名称：“应用程序”，
组成部分：{
“对话框设置”：对话框设置
},
beforeCreate（）{
Auth.checkToken（）
。然后（配置文件=>{
this.profile=profile；
})
.catch（错误=>{
});
},
数据（）{
返回{
标题：“应用程序”，
抽屉：是的，
档案：{}，
导航项：[]
};
}
}
{{profile}}
{{email}}
从“./services/api/Auth”导入身份验证；
从“./组件/对话框设置”导入对话框设置；
导出默认值{
名称：“对话框设置”，
道具：[“个人资料”]，
数据（）{
返回{
电子邮件：this.profile.email
}
}
}

您的子组件电子邮件属性应为计算值

<!-- CHILD COMPONENT -->

<template>
  <div>
    {{profile}} <!-- All the fields are passed and available (e.g. profile.email)-->
    {{email}} <!-- Email is not defined -->
  </div>
</template>

<script>

import Auth from "../services/apis/auth";
import DialogSettings from "../components/dialog-settings";

export default {
    name: "dialog-settings",
  props: ["profile"],
  data() {
    return {
    }
  },
  computed: {
    email () {
      return this.profile ? this.profile.email : 'no email yet'
    }
  }
}
</script>

{{profile}}
{{email}}
从“./services/api/Auth”导入身份验证；
从“./组件/对话框设置”导入对话框设置；
导出默认值{
名称：“对话框设置”，
道具：[“个人资料”]，
数据（）{
返回{
}
},
计算：{
电子邮件（）{
返回this.profile？this.profile.email:“还没有电子邮件”
}
}
}

这是因为父组件属性是在呈现子组件之后设置的。 “数据”不是被动的，它在创建组件时设置一次。Prop'profile“是被动的，所以在渲染组件时，首先应该看到{}，然后设置来自Auth的响应。 如果仍要将其保存在数据中，则可以如下所示显示子组件：

<dialog-settings ref="dialogSettings" :profile="profile" v-if="profile.email"></dialog-settings>

---

但我不建议这样做！

这必须要起作用。我在你的代码中没有看到任何错误。发布你的父组件和子组件的完整代码。既然你不推荐，在这种情况下你的最佳做法是什么？我建议你在我的文章顶部使用这个计算属性解决方案。我不建议只使用v-if。