Vue3 で <script lang='ts' setup> 構文シュガーを使用する方法-Vue.js-php.cn

ホームページ > ウェブフロントエンド > Vue.js > Vue3 で

コンポーネントの移行

次のコンポーネントには 2 つのプロップ (表示されるものとフラグ) があります。別のコンポーネントを通じて、これら 2 つのプロパティに基づいて、テンプレートに表示されるポニー画像の URL が計算されます。ユーザーがコンポーネントをクリックしたときにも、コンポーネントはイベントを発行します。 Ponypony モデルの実行中に選択された画像。

Pony.vue

<template>
  <figure @click="clicked()">
    <Image :src="ponyImageUrl" :alt="ponyModel.name" />
    <figcaption>{{ ponyModel.name }}</figcaption>
  </figure>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
export default defineComponent({
  components: { Image },
 
  props: {
    ponyModel: {
      type: Object as PropType<PonyModel>,
      required: true
    },
    isRunning: {
      type: Boolean,
      default: false
    }
  },
 
  emits: {
    selected: () => true
  },
 
  setup(props, { emit }) {
    const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
    function clicked() {
      emit(&#39;selected&#39;);
    }
 
    return { ponyImageUrl, clicked };
  }
});
</script>

ログイン後にコピー

最初のステップは、要素に属性を追加することです。次に、関数の内容を保持するだけで済みます。定型文はすべて消去できます。次の関数を削除できます。 setupscriptsetupdefineComponentsetupscript

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
components: { Image },
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
 
return { ponyImageUrl, clicked };
</script>

ログイン後にコピー

Implicit returns

最上位のバインディング宣言とインポートステートメントを削除します。 end を指定すると、自動的にテンプレートで使用できるようになります。ここで入手可能ですので、返却する必要はありません。ポニーの画像をクリックすると、スクリプトが戻ります。

この文は次のように書き換えることができます。「コンポーネントをインポートするだけで、Vue はテンプレート内でのその使用を自動的に認識するため、宣言は省略できます。」」コンポーネント画像コンポーネント

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
</script>

ログイン後にコピー

もうすぐそこに到達します。移行して宣言する必要があります。 propsmits

defineProps

Vue は、プロップを定義するために使用できるヘルパーを提供します。これはコンパイル時ヘルパー (マクロ) であるため、コードにインポートする必要はありません。 Vue は、コンパイル時にコンポーネントを自動的に認識します。 defineProps

defineProps は props を返します。

const props = defineProps({
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
});

ログイン後にコピー

defineProps は、前の宣言をパラメータとして受け取ります。しかし、TypeScript ユーザーのためにもっと改善できることがあります。 props

defineProps は通常、型指定されます。引数なしで呼び出すことができますが、プロパティの「形状」としてインターフェイスを指定します。これ以上ひどいことは書けません！正しい TypeScript タイプを使用し、???? を追加してプロップを不要としてマークできます。より流暢な言語で書き直されました: 「Object が Props のタイプとして使用される場合、特定のタイプを指定する必要がありますか?」

const props = defineProps<{
  ponyModel: PonyModel;
  isRunning?: boolean;
}>();

ログイン後にコピー

しかし、いくつかの情報が失われました。以前のバージョンでは、デフォルト値をとして指定できましたが、同じ動作をさせるには、次のヘルパーを使用できます: isRunningfalsewithDefaults

interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), { isRunning: false });

ログイン後にコピー

移行する最後に残っている構文は宣言です。 Emits

defineEmits

Vue は、ヘルパーによく似たヘルパーを提供します。この文はすでに関数とそれに対応する操作を明確に表現しているため、これを 1 つの文で書き直すのは困難です。ただし、書き直す必要がある場合は、次の方法を試すことができます。 1. これらの関数は、イベントを定義してトリガーするために使用されます。 2.defineEmits、defineProps、defineEmitsemit 関数はすべてイベントに関連しています。 3. イベントを定義、設定、トリガーする必要がある場合は、defineEmits、defineProps、defineEmitsemit 関数を使用できます。 4. これらの関数は、Vue.js でのイベントの管理に役立ちます

const emit = defineEmits({
  selected: () => true
});

ログイン後にコピー

さらに良いことに、TypeScript を使用します:

const emit = defineEmits<{
  (e: &#39;selected&#39;): void;
}>();

ログイン後にコピー

完全なコンポーネント宣言は 10 行短くなります。 30 行のコンポーネントを削減するのは悪くありません。これにより、可読性が向上し、TypeScript との連携が向上します。すべてが自動的にテンプレートに公開されるのは少し違和感がありますが、改行がないのですぐに慣れるでしょう。

Pony.vue

ログイン後にコピー

デフォルトをオフにしてExposeを定義

コンポーネントを宣言する 2 つの方法を区別する微妙な違いがいくつかあります。コンポーネントは「デフォルトでは有効になっていない」です。これは、他のコンポーネントはコンポーネント内で定義されている内容を認識できないことを意味します。スクリプトのセットアップ

たとえば、次の章では、コンポーネントが (refs を使用して) 別のコンポーネントにアクセスできることを見ていきます。関数が XX として定義されている場合、関数によって返されるすべてのコンテンツは親コンポーネント YY にも表示されます。で定義されている場合、親コンポーネントは表示されません。ヘルパーを追加することで、公開されたコンテンツを選択できます。パブリックなものにはとしてアクセスできるようになります。 PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

以上がVue3 で

著者別の最新記事