レンダリング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 でコマンドまたはプロセスの実行時間を調べる方法
目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...
目次docker システム df docker システム プルーンNoneオブジェクトをクリーンアッ...
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...
1. WEBでサポートされている画像形式: GIF: 256色を保存でき、透明色をサポートし、アニメ...
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
リクエストロジックフロントエンド --> https経由でnginxをリクエストnginx -...
js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...
1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...
序文しばらく前にMysqlのデッドロック問題に遭遇したので、解決しました。問題の説明: Mysql ...
目次1. Dockerをビルドする2. コンテナに入る3. 設定ファイルを変更する4. Kafkaを...
序文この記事では、docker-compose と dockerfile を使用して、binlog ...
1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...
1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...
この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...