web-dev-qa-db-ja.com

コンポーネントを小道具として渡し、Vueの子コンポーネントで使用することは可能ですか？

Vue 2.0アプリでは、コンポーネントA、B、Cがあるとします。

AはBを宣言、登録、使用します

CをAからBに渡すことは可能ですか？

このようなもの：

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

そして、何らかの方法でBでCを使用します。

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

動機：Bで使用されるが、Aからその子Aを受け取る汎用コンポーネントCを作成したい。実際、AはBを数回使用し、異なる 'C'を渡します。

このアプローチが正しくない場合、Vueでそれを行う適切な方法は何ですか？

@サウラブに応答する

小道具として渡す代わりに、私は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警告]：/home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vueでコンポーネントをレンダリングする際のエラー：

不明なTypeError：未定義のプロパティ 'name'を読み取れません

TypeError：未定義のプロパティ「setAttribute」を読み取ることができません

どうやら私は何か間違ったことをしているようです

javascriptvue.jsvuejs2vue-component
34
Victor Ferreira

このようなことをするために、特別な属性isを使用できます。動的コンポーネントとその使用例は here にあります。

同じマウントポイントを使用し、reserved要素を使用して複数のコンポーネントを動的に切り替え、そのis属性に動的にバインドできます。

コードは次のようになります。

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

要約：

<!-- 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>
16
Jonatas Walker

別のコンポーネントの小道具を介してカスタムコンポーネントを転送するソリューションを次に示します。

:isは特別な属性であり、実際のコンポーネントを置き換えるために使用され、コンポーネントの小道具として使用しようとしても無視されます。幸いなことに、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になります。

カスタムコンポーネントをpropに渡すのは少し難しいです。親コンポーネントのcomponentsプロパティで宣言し、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.countAnotherComponentと単純なarticle html要素を交互に切り替えます。

1
NiBi