vue3 のコンポーネントの互換性のない変更の詳細な説明

// 適切な見出し (つまり、h1、h2、h3 など) を提供する <dynamic-heading> コンポーネントを使用します。2.x では、これはおそらく単一のファイル コンポーネントとして記述されます。
// Vue 2 関数コンポーネントの例 export default {
 機能的: 真、
 プロパティ: ['レベル'],
 レンダリング(h, { props, data, children }) {
 h(`h${props.level}`, データ, 子) を返します
 }
}

// <template> を使用した Vue 2 関数コンポーネントの例
<テンプレート機能>
 <コンポーネント
 :is="`h${props.level}`"
 v-bind="属性"
 v-on="リスナー"
 />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具: ['レベル']
}
</スクリプト>

//vue3.0
'vue' から { h } をインポートします
const DynamicHeading = (props, context) => {
 h(`h${props.level}`, context.attrs, context.slots) を返します
}
DynamicHeading.props = ['レベル']
デフォルトのDynamicHeadingをエクスポートする
// Vue3.0 単一ファイル書き込み <template>
 <コンポーネント
 v-bind:is="`h${$props.level}`"
 v-bind="$attrs"
 />
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具: ['レベル']
}
</スクリプト>

<template> 内のリスナーを削除する機能属性が $attrs の一部として渡され、削除できるようになりました。

// vue2.x
// 以前は、非同期コンポーネントは、Promise を返す関数としてコンポーネントを定義することによって作成されていました。const asyncPage = () => import('./NextPage.vue')
// またはオプションとして作成します const asyncPage = {
 コンポーネント: () => import('./NextPage.vue'),
 遅延: 200、
 タイムアウト: 3000、
 エラー: ErrorComponent、
 読み込み中: LoadingComponent
}

// vue3.x
vue3.xでは、defineAsyncComponentを使用してimport{defineAsyncComponent} from 'vue'を定義する必要があります。
'./components/ErrorComponent.vue' から ErrorComponent をインポートします。
'./components/LoadingComponent.vue' から LoadingComponent をインポートします。

// オプションなしの定義メソッド const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

// オプション付き非同期コンポーネント constasyncPageWithOptions = defineAsyncCopmonent({
 ローダー: () => import('./NextPage.vue'),
 遅延: 200、
 タイムアウト: 3000、
 エラーコンポーネント: エラーコンポーネント、
 ロードコンポーネント: ロードコンポーネント
})

// vue2.x
const oldAsyncComponent = (解決、拒否) => {}
// vue3.x
const asyncComponent = defineAsyncComponent(() => 新しい Promise((resolve, deny) => {}))

<!-- vue2.x -->
<テンプレート>
 <div>
 <p>{{ テキスト }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
 プロパティ: ['テキスト']
 }
</スクリプト>

<!-- vue3.x -->
<!-- props と同様に、emits を使用してコンポーネントによって発行されるイベントを定義できるようになりました -->
<!-- このオプションは、props などの渡されたパラメータを検証するために使用される特定のオブジェクトも受け取ります-->
<!-- 各コンポーネントからのすべての発行を記録することを強くお勧めします。.native 修飾子がない場合、宣言されていないイベントのすべてのリスナーがコンポーネントの $attr に含まれ、デフォルトではコンポーネントのルート ノードにバインドされるためです -->
<テンプレート>
 <div>
 <p>{{ テキスト }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
 プロパティ: ['テキスト'],
 発行: ['accepted']
 }
</スクリプト>