개시하다

하위 구성 요소를 동적으로 전환해야 합니다. 이 때 구성 요소 특유의 props를attribute로 확장해야 합니다.
그 방법과 검증에서 찾은 미리 하면 좋아 보이는 일.

뻔한 일

동적 구성 요소에서attributev-bind=""를 동적으로 전개합니다.

서브어셈블리가 inheritAttrs: false로 설정되지 않은 경우 위험합니다.

inheritattrs에 관해서는 Vue.본격부터 시작하세요.

동적 구성 요소는 Vue.본격부터 시작합니다.

이번에 사용한 코드는 GitHub 위에 놓여 있다.

컨텐트

component/PrefixA.vue

/* 子コンポーネントです。props は mark のみです。 */
<template>
  <span>(A){{ mark }}</span>
</template>
<script>
export default {
  props: ["mark"]
};
</script>

component/PrefixB.vue

/* こちらも子コンポーネントです。こちらの props は mark と color の2つです。 */
<template>
  <span :style="{ color }">(B){{ mark }}</span>
</template>
<script>
export default {
  props: ["mark", "color"]
};
</script>

component/Paragraph.vue

/* props でコンポーネントを受け取って prefix として表示する段落表現のコンポーネントです。 */
<template>
  <p>
    <component :is="prefix.component" v-bind="prefix.props"></component>
    <slot></slot>
  </p>
</template>
<script>
export default {
  props: {
    prefix: {
      validator: v => {
        return v.component && v.props;
}}}};
</script>

props의prefix에서 동적 그리기 구성 요소와 그에 설정된 props를 받아들입니다.
또 구성 요소와 프로포즈가 두 사람이 받아들였다는 것을 명확히 하기 위해validator도 기술했다.Type Script를 사용하면 인터페이스로 정의하면 이해하기 쉽습니다.

<component :is="prefix.component" v-bind="prefix.props"></component>

<component :is=""></component>에서: 어셈블리를 is의 값으로 설정하여 어셈블리를 동적으로 그릴 수 있습니다.v-bind=""에서 프롬프트 대상을 설정하면 받은 프롬프트가 펼쳐집니다.
이번에는 앱입니다.ve로 정의된 ParagraphPrefixA.vue 및 PrefixBvue로 동적 전환하고 싶습니다.
App.vue

<template>
  <div>
    <Paragraph :prefix="prefix">sample</Paragraph>
    <button @click="onclickA">switch_a</button>
    <button @click="onclickB">switch_b</button>
  </div>
</template>

<script>
import Paragraph from "./components/Paragraph.vue";
import PrefixA from "./components/PrefixA.vue";
import PrefixB from "./components/PrefixB.vue";

export default {
  name: "app",
  components: {
    Paragraph,
    PrefixA
  },
  data: () => {
    return {
      prefix: {
        component: PrefixA,
        props: {
          mark: "?"
    }}};
  },
  methods: {
    onclickA() {
      this.prefix.component = PrefixA;
      this.prefix.props.mark = "+";
    },
    onclickB() {
      this.prefix.component = PrefixB;
      this.prefix.props.mark = "-";
      this.prefix.props.color = "red";
}}};
</script>

처음switch 표시 -a를 누르면 switch+b를 누르면 빨간색으로 "-"로 전환됩니다.

<p><span style="color: red;">(B)-</span>sample</p>

이런 느낌으로 펼쳐진다.

이것만 위험해.

이거 봐요. 실행 결과가...

B→A로 전환할 때 페널티킥 기능 사용

<p><span color="red">(A)+</span>sample</p>

color="red"라는 뜻밖의 attribute를 남긴다.
props의 값이 어떻게 되는지 말씀드리자면.

이런 느낌으로 팝스color: red에 계속 남아 있다.몰라. 그동안 문제가 있었던 것 같아.

inheritattrs: 가짜를 통해 억제 가능(version 2.40)

이 설정을 하위 구성 요소로 설정하면 부모가 자녀의attribute에 대한 실수를 억제할 수 있습니다.
주의: 이 옵션은class와 스타일에 대한 연결이 잘못되었습니다.
이런 느낌이에요.(component/PrefixB.ve도 마찬가지)
component/PrefixA.vue

<template>
  <span>(A){{ mark }}</span>
</template>
<script>
export default {
  inheritAttrs: false, // 👈
  props: ["mark"]
};
</script>

총결산

독립된 구성 요소는 반드시 다른 구성 요소에 설정해야 한다inheritAttrs: false. 이것은 구성 요소 간의 관계를 의식하기 때문에 개인은 그다지 흥미를 느끼지 않는다.
아무것도 하지 않으면 inherit Attrs는ture의 상태이지만,forll slow를 허용해도 기분이 좋지 않은 일이 버그의 원인이 될 수 있다고 생각합니다.내 경험에 따르면 페널티킥의 은혜를 입은 것은 클라스와 스타일뿐이다. 인허티 애틀러스를 가짜로 설정해도 둘 다 쓸 수 있다면 문제없다.
여기 기사.에도 있고, Vue의 기초류와 믹스를 설치했다면 부작용을 억제하기 위해 보통inheritAttrs: false으로 설정하는 게 좋을 것 같다.
나는 전방의 대규모 개발에서 구성 요소를 진열에 넣고 납품하는 경우도 있다고 생각한다.그러나 저는 프로퍼스에서 이전의 가치가 계속 남아 있는 것이 무섭고 최대한 사용하고 싶지 않은 기능이라고 생각합니다.