7

あるコンポーネントが別のコンポーネントをインポートする Vue npm パッケージを作成しようとしています (簡単な例としては、パッケージに汎用ボタン コンポーネントと、ページングに my ボタン コンポーネントを使用するテーブル コンポーネントが含まれている場合があります)。子コンポーネントを親コンポーネントにインポートして、パッケージを正常にビルドできます。しかし、親コンポーネントを (パッケージから) アプリケーションにインポートして使用すると、子コンポーネントのコンテンツが表示されません。そこにないかのようにスキップします。

私は途方に暮れています。

テスト用にいくつかの非常に単純なコンポーネントを使用しています。

<!-- Child Component -->
<template>
    <div id="childElement">Child Component</div>
</template>

<script>
    export default {
        name: "childComponent"
    }
</script>

<style>
    #childElement {
        font-weight: bold;
    }
</style>

<!-- Parent Component -->
<template>
    <div>
        <div id="parentElement">Parent Component</div>
        <child-component></child-component>
    </div>
</template>

<script>
    import ChildComponent from "./ChildComponent.vue";

    export default {
        name: "parentComponent",
        components: {
            ChildComponent
        }
    }
</script>

<style>
    #parentElement {
        font-weight: bold;
    }
</style>

（編集）ここに私のindex.jsファイルがあります

import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';

const install = Vue => {
  Vue.component("ParentComponent", ParentComponent);
  Vue.component("ChildComponent", ChildComponent);
};

export default {
  install
};

export { ParentComponent, ChildComponent };

使用法 (別のアプリで、「yarn add ...」の後)

<template>
  <div>
    <div>
      <h1>Testing Section</h1>
      <parent-component></parent-component>
      <h1>End Testing Section</h1>
    </div>
  </div>
</template>

<script>
  import { ParentComponent, ChildComponent } from ...;

  export default {
    name: 'TestApp',
    components: {
      ParentComponent,
      ChildComponent
    }
  };
</script>

そして、これは私がページに表示するものです:

試験課
親コンポーネント
テストセクションの終了

ここに私が知っているいくつかのことがあります：

  • ParentComponent の ChildComponent へのインポート パスは正しいです。意図的にパスを存在しないものに変更すると、ビルドしようとするとエラーになります。
  • ChildElement をアプリに直接インポートして使用すると、期待どおりに動作します。
  • ParentComponent と ChildComponent を取得してアプリ構造にコピーし、(パッケージからインポートするのではなく) そのようにインポートすると、ParentComponent は ChildComponent を期待どおりに表示します。

この方法でコンポーネントをインポートしているように見える他のパッケージがあるので、私がやっていることは可能だと思います。

誰かの考えに感謝します！

(そして、プロジェクトのコードをさらに含めると役立つかどうかを教えてください)

更新これをもう少し追跡しました。子コンポーネントを含めると、アプリから次の警告が表示されます。

[Vue 警告]: resolveComponent は render() または setup() でのみ使用できます。

インターネットで他のリソースを見つけるのに役立ちましたが、何も役に立ちませんでした. 私の単純なテストでは、resolveComponent をどこでも明示的に使用していません。そして、テンプレートの代わりにレンダリング機能を使用すると、同じ結果、同じ警告が表示されます。

4

2 に答える 2

1

まず、コンソールにエラーがないか確認してください。

また、このフラット インポートは奇妙に見えimport { ParentComponent, ChildComponent } from ...; ます。既に子コンポーネントを親にインポートしている場合は、再度インポートする必要はありません。

index.jsあなたのパッケージに何が入っているかわかりません。しかし、次のようなものにすることをお勧めします。

import ParentComponent from './components';
 
export default ParentComponent;

次に、次のように使用できます。 import ParentComponent from 'NameOfYourNpmPackage'

于 2020-11-11T06:38:30.933 に答える