동적 구성 요소 및 사용자 지정 이벤트 사용 시 VueJS 경고

동적 구성 요소 및 사용자 지정 이벤트 사용 시 VueJS 경고

그래서 이런 경고를 받았다.

"관련성이 없는 이벤트 수신기(addNewResource)는 구성요소로 전달되었지만 구성요소가 조각 또는 텍스트 루트 노드를 렌더링하기 때문에 자동으로 상속될 수 없었다.수신기가 구성 요소 사용자 지정 이벤트 수신기일 경우에만 "emits" 옵션을 사용하여 수신기를 선언하십시오.

그리고 나는 왜 그런지 이해할 수 없다.나는 2개의 맞춤 이벤트가 있는 동적 구성요소를 사용하고 있다.나는 두 개의 방출된 사건을 모두 더하기 위해 노력했다.emits두 구성 요소의 객체

App.vue

<template>
  <AppHeader />
  <NavigationBar @select-component="selectComponent" />
  <keep-alive>
    <component
      :is="selectedComponent"
      v-bind="componentProps"
      @delete-resource="deleteResource"
      @add-new-resource="addNewResource"
    ></component>
  </keep-alive>
</template>

<script>
import AppHeader from "./components/SingleFile/AppHeader.vue";
import NavigationBar from "./components/NavigationBar.vue";
import LearningResources from "./components/LearningResources.vue";
import AddResource from "./components/AddResource.vue";

export default {
  components: {
    AppHeader,
    NavigationBar,
    LearningResources,
    AddResource,
  },
  data() {
    return {
      selectedComponent: "learning-resources",
      learningResources: [
        {
          name: "Official Guide",
          description: "The official Vue.js documentation",
          link: "https://v3.vuejs.org",
        },
        {
          name: "Google",
          description: "Learn to google...",
          link: "https://www.google.com/",
        },
      ],
    };
  },
  methods: {
    selectComponent(component) {
      this.selectedComponent = component;
    },
    deleteResource(name) {
      this.learningResources = this.learningResources.filter(
        (resource) => resource.name !== name
      );
    },
    addNewResource(newResourceObject) {
      const newResource = {
        name: newResourceObject.title,
        description: newResourceObject.description,
        link: newResourceObject.link,
      };
      this.learningResources.push(newResource);
    },
  },
  computed: {
    componentProps() {
      if (this.selectedComponent === "learning-resources") {
        return {
          learningResources: this.learningResources,
        };
      }
      return null;
    },
  },
};
</script>

AddResource.vue

<template>
  <base-card>
    <template #default>
      <form @submit.prevent>
        <div>
          <label for="title">Title</label>
          <input type="text" v-model="newResource.title" />
        </div>
        <br />

        <div>
          <label for="description">Description</label>
          <textarea rows="3" v-model="newResource.description" />
        </div>
        <br />

        <div>
          <label for="link">Link</label>
          <input type="text" v-model="newResource.link" />
        </div>

        <button @click="$emit('add-new-resource', newResource)">
          Add Resource
        </button>
      </form>
    </template>
  </base-card>
</template>

<script>
import BaseCard from "./Base/BaseCard.vue";

export default {
  components: {
    BaseCard,
  },
  emits: ["add-new-resource"],
  data() {
    return {
      newResource: {
        title: "",
        description: "",
        link: "",
      },
    };
  },
};
</script>

LearningResources.vue

<template>
  <base-card v-for="resource in learningResources" :key="resource.name">
    <template #header>
      <h3>{{ resource.name }}</h3>
      <button @click="$emit('delete-resource', resource.name)">Delete</button>
    </template>

    <template #default>
      <p>{{ resource.description }}</p>
      <p><a :href="resource.link">View Resource</a></p>
    </template>
  </base-card>
</template>

<script>
import BaseCard from "./Base/BaseCard.vue";

export default {
  components: {
    BaseCard,
  },
  props: {
    learningResources: Array,
  },
  emits: ["deleteResource"],
};
</script>

때문에 그런 것 같다.<component>두 개의 개별 구성 요소에 사용되며, 두 구성 요소 모두 다른 구성 요소와 동일한 이벤트를 발생시키지 않는다.

각 구성 요소의 속성 상속을 비활성화할 수 있는 한 가지 방법:

export default {
    ...
    inheritAttrs: false
    ...
}

만약 이것이 당신의 필요에 맞지 않는다면, 당신은 방출된 두 사건, 즉 이벤트들의 이름을 다음과 같은 공유된 이름으로 바꾸는 논리를 리팩터링할 수 있다."addOrDeleteResource"에서 방출되는 이벤트를 결정하십시오.App.vue그리고 그에 따라 처리한다.

참조URL: https://stackoverflow.com/questions/65554948/vuejs-warning-when-using-dynamic-components-and-custom-events