javascript - 视觉 : Set child-component data with props values not working

Question

简单地说，我有两个组件:

• 父组件，它传递一个名为“profile”的 Prop 对象
• 子组件 接收 profile 属性

配置文件值是这样的对象:

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

会发生什么？

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

目标是什么？

我想用配置文件电子邮件属性初始化值“电子邮件”。

我期望什么？

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

更新

我没有指定电子邮件是用作模型的数据值。我刚刚尝试删除它并简单地在模板中打印电子邮件的值，但效果不佳。

<!-- PARENT COMPONENT -->

<template>
  <dialog-settings ref="dialogSettings" :profile="profile"></dialog-settings>
</template>

<script>

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

export default {
	name: "app",
  components: {
    "dialog-settings": DialogSettings
  },
  beforeCreate() {
    Auth.checkToken()
      .then(profile => {
        this.profile = profile;
      })
      .catch(err => {
      });
  },
  data() {
    return {
      title: "App",
      drawer: true,
      profile: {},
      navItems: []
    };
  }
}
</script>

<!-- CHILD COMPONENT -->

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

<script>

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

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

更新 2

我尝试了几种方法，我认为问题出在 beforeCreate() 中对 API 的异步调用。

Answer 1

你的子组件 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>

那是因为父组件属性是在渲染子组件之后设置的。“数据”不是 react 性的，它在创建组件时设置一次。 Prop 'profile"是响应式(Reactive)的，所以首先当您渲染组件时，您应该看到 {} 并且在设置来自 Auth 的响应之后。如果您仍想将其保留在数据中，则可以像这样显示子组件:

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

但我不推荐这样做!