컴포넌트를 소품으로 전달하여 Vue의 자 컴포넌트에 사용할 수 있습니까?

컴포넌트를 소품으로 전달하여 Vue의 자 컴포넌트에 사용할 수 있습니까?

Vue 2.0 앱에서는 컴포넌트 A, B 및 C가 있다고 가정합니다.

A는 B를 선언, 등록 및 사용한다.

A에서 B로 C를 넘겨줄 수 있나요?

다음과 같은 경우:

<template>
  <div class="A">
    <B :child_component="C" />
  </div>
</template>

그리고 어떻게든 B에 C를 사용하세요.

<template>
  <div class="B">
    <C>Something else</C>
  </div>
</template>

범용 컴포넌트를 .Bthat that that that in in in A「」로부터 합니다.A C.★★★★★★★★★★★★★★★★★★.ABC자형

이 방법이 올바르지 않은 경우 Vue에서 수행하는 적절한 방법은 무엇입니까?

@Saurabh 응답

나는 소품 대신 B 안에 있는 제안을 시도해 보았다.

<!-- this is where I Call the dynamic component in B -->

<component :is="child_component"></component>

//this is what I did in B js
components: {
 equip: Equipment
}, 
data () {
 return {
   child_component: 'equip',
   _list: []
 }
}

기본적으로는 기기를 렌더링하려고 하지만 다이내믹한 방법으로

콘솔에 오류가 3개 표시되며 페이지가 공백이다.

[Vue warn] :/home/victor/projetos/tokaai/public/src/components/EquipmentFormItem에서 구성 요소를 렌더링하는 동안 오류가 발생했습니다.vue:

Uncaughed TypeError: 정의되지 않은 속성 'name'을 읽을 수 없습니다.

TypeError: 정의되지 않은 속성 'setAttribute'를 읽을 수 없습니다.

보아하니 내가 뭔가 잘못하고 있는 것 같다

요약:

<!-- Component A -->
<template>
  <div class="A">
    <B>
      <component :is="child_component"></component>
    </B>
  </div>
</template>

<script>
import B from './B.vue';
import Equipment from './Equipment.vue';

export default {
  name: 'A',
  components: { B, Equipment },
  data() {
    return { child_component: 'equipment' };
  }
};
</script>

<!-- Component B -->
<template>
  <div class="B">
    <h1>Some content</h1>
    <slot></slot> <!-- Component C will appear here -->
  </div>
</template>

으로 사용할 수 .is이런 일을 해줘서 고마워.동적 컴포넌트의 예와 그 용도는 여기에서 확인할 수 있습니다.

동일한 마운트 포인트를 사용하여 예약된 요소를 사용하여 여러 컴포넌트 간에 동적으로 전환하고 해당 is 속성에 동적으로 바인딩할 수 있습니다.

코드는 다음과 같습니다.

<template>
  <div class="B">
    <component :is="child_component"> Something else</component>
  </div>
</template>

다른 컴포넌트의 소품을 통해 커스텀 컴포넌트를 전송하는 솔루션

:is는 특수 속성으로 실제 컴포넌트를 교환하기 위해 사용되며 컴포넌트에서 받침대로 사용하려고 하면 무시됩니다.도 이 에도 else use luckily 、 른 、 른 、 용 、 luckily 、 luckily 、 luckily 、 luckily 、 luckily 、 luckily 、 luckily luckily 。el을 「」로 합니다.component다음과 같이 합니다.

<template>
  <div>
    <component :is="el">
      <slot />
    </component>
  </div>
</template>
<script>
  export default {
    name: 'RenderDynamicChild',
    props: {
        el: {
            type: [String, Object],
            default: 'div',
        },
    },
  }
</script>

에서 el특성이 하위 구성요소로 사용됩니다.하거나 html을 참조할 수 .div컴포넌트 선언에 지정된 대로 디폴트로 설정되어 있습니다.

커스텀 컴포넌트를 소품으로 전달하는 것은 조금 까다롭습니다.할 수 .components 요소의 한 후 상상컴컴음음음음음음음음음음음 property property property property property property property property property property property에 사용합니다.el속성는 ' 컴포넌트는 '동적 컴포넌트가 .data ★★★★★★★★★★★★★★★★★」computed템플릿에서 소품으로 사용할 수 있도록 속성을 지정합니다., 「」, 「」도 주의해 주세요.AnotherComponent에 신고할 필요가 없다.components소유물.

<template>
  <RenderDynamicChild :el="DynamicComponent">
    Hello Vue!
  </RenderDynamicChild>
</template>

<script>
import RenderDynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() {
    return {
      DynamicComponent: AnotherComponent,
    };
  },
};
</script>

동적 컴포넌트에 대해 계산된 속성을 사용하면 컴포넌트 간에 쉽게 전환할 수 있습니다.

<script>
import DynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() { return { count: 0 } },
  computed: {
    DynamicComponent() {
      return this.count % 2 > 1 ? AnotherComponent : 'article';
    },
  },
};
</script>

증가하다this.count번갈아 가다AnotherComponent심플하고articlehtml 요소

기능 컴포넌트 내에서 다른 컴포넌트를 사용하고 싶은 경우는, 다음의 조작은 다음과 같습니다.

<script>
  import Vue from 'vue'
  import childComponent from './childComponent'
  Vue.component('child-component')
  export default {}
</script>


<template functional>
  <div>
    <child-component/>
  </div>
</template>

참고 자료: https://github.com/vuejs/vue/issues/7492#issue-290242300

이 질문에 답하기엔 너무 늦은 것 같아.하지만 나는 그것이 이 같은 문제에 대해 다른 사람들에게 도움이 될 수 있다고 생각한다.

다른 컴포넌트를 vue에 투입할 수 있는 방법을 모색하고 있습니다만, VUE3에서는 다음과 같은 이름 있는 슬롯을 사용하여 컴포넌트를 도입할 수 있는 방법이 있는 것 같습니다.

이 매뉴얼은 다음과 같습니다.https://v3.vuejs.org/guide/component-slots.html#named-slots

기본적으로 다음과 같은 것이 있습니다.

<template>
  <div class="A">
    <slot name="ComponentC"></slot> <!-- Here will be rendered your ComponentC -->
  </div>
  <div class="A">
    <slot name="ComponentD"></slot> <!-- Here will be rendered your ComponentD -->
  </div>
  <div class="A">
    <slot></slot> <!-- This is going to be children components -->
  </div>
</template>

그리고 당신으로부터B요소

<template>
  <div class="B">
    <A>
      <template v-slot:ComponentC>
        <h1>Title of ComponentC </h1>
      </template>
      <template v-slot:ComponentD>
        <h1>Title of ComponentD </h1>
      </template>
      <template v-slot:default>
        <h1>Title of child component </h1>
      </template>
    </A>
  </div>
</template>

언급URL : https://stackoverflow.com/questions/42992579/is-it-possible-to-pass-a-component-as-props-and-use-it-in-a-child-component-in-v