レンダリングAPIの変更この変更は<template>ユーザーに影響しません
レンダリング関数のパラメータ// 2.0 レンダリング関数 export default { レンダリング(h) { h('div') を返す } } // 3.x 構文 export default { 与える() { h('div') を返す } } レンダリング関数のシグネチャの変更// 2.x エクスポートデフォルト{ レンダリング(h) { h('div') を返す } } // 3.x 'vue' から { h, reactive } をインポートします エクスポートデフォルト{ セットアップ(prop, {スロット, 属性, 出力}) { 定数状態 = リアクティブ({ カウント: 0 }) 関数の増分() { 状態.count++ } // レンダリング関数に戻る return () => h( 'div', { onClick: 増加 }, 状態数 ) } } VNode プロパティのフォーマット// 2.x { クラス: ['button', 'is-outlined'], スタイル: {色: '#fffff'}, 属性: {id: '送信'}, domProps: {innerHTML: ''}, オン: {クリック: 送信フォーム}, キー: '送信ボタン' } // 3.x VNode構造はフラットです{ クラス: ['button', 'is-outlined'], スタイル: { 色: '#34495E' }, id: '送信', 内部HTML: ''、 onClick: 送信フォーム、 キー: '送信ボタン' } スロット統合通常のスロットとスコープ付きスロットを変更しました
// 2.x h(レイアウトコンポーネント、[ h('div', {スロット: 'header'}, this.header), h('div', {スロット: 'header'}, this.header) ]) // スコープスロット: // 3.x h(レイアウトコンポーネント、{}、{ ヘッダー: () => h('div', this.header), コンテンツ: () => h('div', this.content) }) // プログラム的にスコープ付きスロットを導入する必要がある場合、それらは $slots オプションに統合されるようになりました // 2.x スコープ付きスロット this.$scopedSlots.header // 3.x ではこれを書きます。$slots.header $listeners を削除する
Vue2 では、this.attrs と this.attrs および this.listeners を使用して、それぞれコンポーネントに渡される属性とイベント リスナーにアクセスできます。inheritAttrs: false と組み合わせることで、開発者はこれらの属性とリスナーをルート要素ではなく他の要素に適用できます。 <テンプレート> <ラベル> <input type="text" v-bind="$attrs" v-on="$listeners"> </ラベル> </テンプレート> <スクリプト> エクスポートデフォルト{ 継承属性: false } </スクリプト> Vue の仮想 DOM では、イベント リスナーは on というプレフィックスが付いた属性になり、attrs オブジェクトの一部になったため、リスナーは削除されます。 <テンプレート> <ラベル> <input type="text" v-bind="$attrs" /> </ラベル> </テンプレート> <スクリプト> エクスポートデフォルト{ 継承属性: false } // このコンポーネントが id 属性と v-on:close リスナーを受け取った場合、$attrs オブジェクトは次のようになります { id: 'my-input', onClose: () => console.log('close イベントがトリガーされました') } </スクリプト> $attrs にクラスとスタイルが含まれるようになりましたこれで$attrにはクラスやスタイルを含むすべての属性が含まれるようになりました 2.xでは、仮想DOMはクラスとスタイルを特別に処理するため、それらは$attrに含まれず、inheritAttr: falseを使用すると副作用が発生します。
<テンプレート> <ラベル> <input type="text" v-bind="$attrs" /> </ラベル> </テンプレート> <スクリプト> エクスポートデフォルト{ 継承属性: false } </スクリプト> <!-- 書き込み --> <my-component id="my-id" class="my-class"></my-component> <!-- vue2 は以下を生成します --> <label class="私のクラス"> <input type="text" id="私のID" /> </ラベル> <!-- vue3 は以下を生成します --> <ラベル> <input type="text" id="私のID" class="私のクラス" /> </ラベル> 以上がvue3におけるレンダリング機能の非互換な変更についての詳しい説明です。vueレンダリング機能の非互換な変更についての詳細は、123WORDPRESS.COM内の他の関連記事にも注目してください! 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18 の解凍バージョンをダウンロードしてインストールし、MySQL サービスを開始するための詳細なグラフィック手順
>>: Linux でコマンドまたはプロセスの実行時間を調べる方法
springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...
WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...
1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...
Vue親コンポーネントは子コンポーネントの関数を呼び出す親コンポーネントはイベントを通じて子コンポー...
昨日、VMware に CentOS7 をインストールしました。Tomcat パッケージを転送するた...
目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...
Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...
1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...
シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...
1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...
目次1. クロスドメインフィルタ CorsFilter 1.1 設定例1.2 パラメータの説明2. ...
ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...
質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...
目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...
MySQL が数千万のデータをクエリする場合、ほとんどのクエリ最適化の問題はインデックスを通じて解決...