VUEエクスポート文字列でデフォルトをエクスポートできますか？

vueのexport default ​​

はい、Vueの

は文字列をエクスポートできます。 それは典型的な使用法ではありませんが、export defaultはモジュールからa export default単一値をエクスポートするように設計されており、その値は文字列を含む任意のデータ型にすることができます。 たとえば、

// myString.js
export default 'Hello from myString.js';

このコードは、文字列「hello from mystring.js」をエクスポートするモジュールを作成します。 次に、この文字列を他のモジュールでインポートおよび使用できます。

// MyComponent.vue
import myString from './myString.js';

export default {
  data() {
    return {
      message: myString
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
};

この例では、インポートされた文字列を使用してテンプレートに「hello from mystring.js」を表示します。 Vueコンポーネント。 ただし、この文字列がコンポーネントの定義全体を置き換えることを理解することが重要です。 コンポーネント自体はレンダリングされません。代わりに、文字列はエクスポートされた値になります。

MyComponentこの例を考慮してください。myString

これを次のような別のコンポーネントで使用しようとする場合：export default

export default これは、

が文字列でオーバーライドされているためです。

vue.jsプロジェクトで

// MyComponent.vue
export default 'This is my string literal';

を使用して文字列をエクスポートすることの意味は何ですか？ 主な意味は、Vueコンポーネントのコア機能を失い、UI要素をレンダリングすることです。 ファイルを、文字列をエクスポートする単純なJavaScriptモジュールに効果的に変換します。 コンポーネントとして

ファイルを使用する場合は、

// AnotherComponent.vue
import MyComponent from './MyComponent.vue';

export default {
  data() {
    return {
      message: MyComponent
    };
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
};

を使用して文字列をエクスポートすることでそれを防ぎます。 さらに、予想されるコンポーネント構造に依存するコードは壊れます。 コンポーネントの標準エクスポートを文字列に置き換える非常に具体的な理由がない限り、一般的にアンチパターンと見なされます。

AnotherComponentVUEコンポーネントの文字列などの単純なデータ型をエクスポートするための好ましい方法はありますか？ コンポーネントのエクスポートを置き換える代わりに、コンポーネントのexport defaultまたは

API内の名前付きエクスポートとして文字列をエクスポートする必要があります。

// myString.js
export default 'Hello from myString.js';

このアプローチは、文字列をコンポーネントの定義とは別に保持し、コンポーネントと文字列の両方を個別に使用できるようにします。 これはよりクリーンで、より整理されており、単純なデータ型にexport defaultを使用する潜在的な落とし穴を回避します。 これは、Vueコンポーネントとともに簡単なデータ型をエクスポートするための好ましい方法です。

以上がVUEエクスポート文字列でデフォルトをエクスポートできますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。