Vue 3 - ルート コンポーネントでコンポーネントとミックスインを使用する方法は?
P粉340980243
2023-08-24 16:25:32
<p>構文を Vue 2 から Vue 3 に変換しようとしましたが、Vue 2 でこれが表示された場合、<em>mixins</em> および <em>components</em> を含める方法がわかりません。コード: </p>
<pre class="brush:php;toolbar:false;">「./App.vue」からアプリをインポート;
const app = 新しい Vue({
ミックスイン: [globalMixin]、
ルーター、
el: '#app',
店、
コンポーネント: {
もの、
こんにちは
}、
レンダリング: h => h(アプリ)
});</pre>
<p>私の理解が正しければ、これは Vue 3 の構文です。</p>
<pre class="brush:php;toolbar:false;">const app = createApp(App)
アプリ
.use(ストア)
.use(ルーター)
app.mount('#app')</pre>
<p>Vue 2 の例にはミックスインと 2 つのコンポーネントがありますが、それらを Vue 3 の構文に追加するにはどうすればよいですか?
<code>app.component('Thing', Thing)</code> を実行してコンポーネントを追加できますが、これは 1 つのコンポーネントにすぎません。1 つずつ追加する必要がありますか?ブレンドしてみるとどうでしょうか? </p>
Vue 3 では、アプリケーション API mixin メソッドを使用できます。
リーリーコンポーネントの場合は、1 つずつ追加できます。この方法のほうがわかりやすいので、私はこの方法を好みます。
Vue 3 では、ルート コンポーネントでローカル コンポーネントの登録とミックスインが可能です (グローバル名前空間の汚染を避けたい場合に非常に便利です)。
リーリーextends
options を使用してApp.vue
のコンポーネント定義を拡張し、独自のmixins
とcomponents
を追加します。オプション:コンポーネントを 1 つずつ登録することは、特にコンポーネントが少数しかない場合には、良い方法のように思えます。
######デモ######