개체와 같은 소품 기본값이 작동하지 않음

개체와 같은 소품 기본값이 작동하지 않음

나는 매우 이상한 상황이 있다.

나의HomeComponent.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld :msg="msg" @update="inputUpdated" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
  import { Message } from "@/interfaces/message";

  export default defineComponent({
    name: "Home",
    components: {
      HelloWorld,
    },
    setup(props, { emit }) {
      const msg: Message = {
        year: 2020,
      };
      function inputUpdated(value): void {
        console.log("Get Event : " + value);
      }
      return {
        msg,
        inputUpdated,
      };
    },
  });
</script>

나의HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg.title }} in the year : {{ msg.year }}</h1>
    <button @click="increment">count is : {{ count }}</button>
    <div>{{ pow(2, 3) }}</div>
    <p>Edit <code>component</code> to test state is {{ state.year }}</p>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, PropType } from "vue";
  import { State } from "@/interfaces/state";
  import { Message } from "@/interfaces/message";

  export default defineComponent({
    name: "HelloWorld",
    props: {
      msg: {
        type: Object as PropType<Message>,
        required: true,
        default: function () {
          return {
            title: "Arrow Function Expression",
            year: 2020,
          };
        },
      },
    },
    setup(props, { emit }) {
      console.log(props);
      const count = ref(0);
      const state: State = reactive({
        title: "",
        year: 2020,
      });
      function pow(x: number, y: number): number {
        return Math.pow(x, y);
      }

      function increment(): void {
        console.log("Emit : Hello World");
        emit("update", "Hello World");
        count.value++;
      }

      return {
        count,
        increment,
        pow,
        state,
      };
    },
  });
</script>

인터페이스Message:

export interface Message {
    title?: string;
    year?: number;
}

내가 가지고 있는 문제는 설사 내가 a를 만들었어도 이다.default을 위해msg소품이 작동하지 않았고, 고려되지 않았다.나는 메시지를 가지고 있다.in the year :. 소품 값에 대한 기본값으로 잘못하고 있는 것은?미리미리하고 내 영어실력에 대해 미안해.

기본 프로펠러의 속성이 전달된 프로펠러와 병합될 것으로 예상하는 경우.그것은 작동하지 않을 것이고 소품은 개조되어서는 안 된다는 것을 의미할 것이다.그default소품이 전달되지 않았을 때만 소품이 사용된다(그래서 소품이 필요 없다).required속성).

개체를 개별 소품으로 분할할 것인지 결정해야 할 것이다.

props: {
  title: ...,
  year: ...
}

또는 계산된 데이터를 사용하여 병합:

setup(props) {
  const msgDefault = {
    title: "Arrow Function Expression",
    year: 2020,
  };
  const merged = computed(() => {
    return Object.assign({}, msgDefault, props.msg);  // shallow merge
  })
  return { merged }
}

참조URL: https://stackoverflow.com/questions/66602768/default-value-for-props-like-an-object-didnt-work