道具可能未定义

Question

我有一个小的 Vue 功能组件，它从它的父级获取 prop：

export default defineComponent({
  name: 'ExpandedMovieInformation',
  props: {
    movie: {
      type: Object as PropType<Movie>,
    },
  },
  setup(props, { emit }) {
    const { movie } = props;
  },
});
</script>

<template>
  <div>
    <div class='overlay'>
      <h1>{{ movie.title }}</h1>
      <span class='release-date'>{{ movie.release_date }}</span>
      <p>{{ movie.overview }}</p>
    </div>
  </div>
</template>

在父组件中启动组件：

<ExpandedMovieInformation
  :movie="currentMovie" />

代码可以编译，但在模板中我收到警告：

如何正确地将类型分配给 prop，使其不可能未定义？

Answer 1

在制作 ExpandedMovieInformation 列表组件时提供电影参数的事实如下：

<ExpandedMovieInformation :move="currentMovie" />

并不意味着每个人都会这样做，有人可能会在没有那个的情况下制作组件属性:

<ExpandedMovieInformation />

因此属性可能未定义。
要解决此问题，您可能需要为属性添加默认值，方法如下：

props: {
    movie: {
      type: Object as PropType<Movie>,
      default: {}
    },
  },

道具可能未定义

Props might be undefined

typescript

vuejs2

vue-composition-api