デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します。 // 親コンポーネント <テンプレート> <div> <div> <div>{{都市名}}</div> <button @click="changeReactive">リアクティブを変更する</button> <button @click="handleFather">親コンポーネントをクリックします</button> </div> <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" /> </div> </テンプレート> <スクリプト> 'vue' から { ref、onMounted、toRefs、reactive } をインポートします。 './Child.vue' から Child をインポートします。 エクスポートデフォルト{ コンポーネント: 子供 }, 設定 () { 定数ハンドルボタン = (val) => { console.log('btn', val) } const testClick = (val) => { コンソールログ('testClick', val) } 定数childRef = ref(null) 定数ハンドルファーザー = () => { childRef.value.observed.a = 666 //親コンポーネントが子コンポーネントの値を変更します console.log('子コンポーネントを取得する方法', childRef.value) // サブコンポーネントは expose を定義する必要があります。定義しない場合は、返す必要があります。対応する関数は通常、直接返されません。ページで使用されていない場合は、必要なメソッドまたは値のみを公開します。 } // セットアップ関数メソッドを介して記述し、ページで使用されるメソッドと値を返す必要があります // reactve によって定義された値の場合、分解によってページにレンダリングされた値はレスポンシブではないため、toRefs を介して変換してから分解する必要があります // ...toRefs(testReactive) const testReactive = リアクティブ({ 都市: '北京'、 年齢: 22 }) 定数changeReactive = () => { testReactive.city = '重慶' } 戻る { ハンドルボタン、 テストクリック、 ハンドル父、 ...toRefs(テストリアクティブ)、 変化反応、 子参照 } } } </スクリプト> //サブコンポーネント <テンプレート> <div> {{観察された.a}} <button @click="handleBtn">クリック</button> </div> </テンプレート> <スクリプト> 'vue' から {defineProps、defineEmits、defineEmit、defineExpose、reactive } をインポートします。 エクスポートデフォルト{ 小道具: { 都市: 文字列 }, /* これは主に ctx.attrs がこの属性にアクセスできないようにするために設定されます */ /* props に設定された一部のプロパティは attrs には表示されません*/ 出力: ['testClick'], // これを設定する目的は、attrs に対応するカスタム メソッドがないことを確認することです。 // peops がサブコンポーネントに設定されている場合、対応する値は attrs ではアクセスできません // arrts は vue3 で機能が強化されており、カスタム メソッド、クラス、スタイルがマウントされています //vue2 では、カスタム メソッドは $listeners にマウントされます。vue3 では、$listeners は削除されています。setup (props, ctx) { const { 公開、放出 } = ctx 定数ハンドルボタン = () => { コンソールログ('btn', ctx) 出力('testClick', 666) } const 観察 = 反応的({ 1: 1 }) 関数 clickChild (値) { 観測値.a = 値 } さらす({ clickChild, //カスタムメソッドを公開、親コンポーネントの呼び出しを監視//子コンポーネントの値を公開}) 戻る { 観察された、 ハンドルボタン } } } </スクリプト> スクリプトタグ<script setup>にセットアップを記述します。 // 親コンポーネント <テンプレート> <div> <button @click="handleFather">父親をクリック</button> <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" /> </div> </テンプレート> <スクリプトの設定> 'vue' から { ref } をインポートします './Child.vue' から Child をインポートします。 // 戻りエクスポートページで使用されていないメソッドと値のこの書き方では、Vue 上の対応する定義を直接分解する必要があります。 定数childRef = ref(null) 定数ハンドルボタン = (val) => { console.log('btn', val) } const testClick = (val) => { コンソールログ('testClick', val) } 定数ハンドルファーザー = () => { console.log('子コンポーネントを取得するメソッド', childRef.value) childRef.value.testFatherClick() //親コンポーネントは子コンポーネントのメソッドを呼び出します //子コンポーネントはdefineExposeを通じて対応するメソッドを公開します} </スクリプト> // サブコンポーネント <テンプレート> <div> <button @click="handleBtn">クリック</button> </div> </テンプレート> <スクリプトの設定> 'vue' から {defineProps、defineEmits、defineExpose、reactive } をインポートします。 const props = defineProps({ 都市: 文字列 }) const エミット = defineEmits(['handleBtn', 'testClick']) 定数ハンドルボタン = () => { // console.log('btn', props, 出力) 出力('testClick', 12) } const testFatherClick = () => { console.log('テスト親コンポーネントが子コンポーネントをクリック') } const 観察 = 反応的({ 1: 1 }) defineExpose({ //メソッドを親グループに公開する testFatherClick, 観察された }) </スクリプト> <スタイルスコープ> </スタイル> jsx によるレンダリングは react に非常に近く、私が最もお勧めする方法でもあります。jsx は ts もサポートしていますが、.vue ファイルは tsx ほどサポートされていません。 // 親コンポーネント import { ref, reactive } from 'vue' './Child.jsx' から Child をインポートします。 const 父 = { 設定() { // jsx で定義された ref は、ページで使用するときに .value を介してアクセスする必要があります。const city = ref('北京') 定数changeCity = () => { city.value = '杭州' } 定数childRef = ref(null) const handelFather = (追加) => { // また、コンポーネントで expose メソッドを公開することで // city.value = 'Hangzhou' console.log('childRef', childRef.値) } const testChildClick = (val) => { console.log('テストサブコンポーネントのクリック', val) } 戻り値 () => { 戻る ( <div> <div>{city.value}</div> <button onClick={changeCity}>都市を変更</button> <button onClick={handelFather}>親をクリック</button> <子 testChildClick={testChildClick} ref={childRef} /> </div> ) } } } エクスポートデフォルト 父 //サブコンポーネント import { ref, reactive } from 'vue' 定数子 = { 小道具: { testChildClick: 関数 }, セットアップ(props, { 発行, 公開 }) { const { testChildClick } = プロパティ const testFatherClick = () => { console.log('テスト親コンポーネントが子コンポーネントをクリック') } 定数handelBtn = () => { // emitting('testChildClick') // これは jsx では動作しません // console.log('props', props) testChildClick('親コンポーネントに値を返す') // このメソッドは、関数を介して親コンポーネントに値を渡して子コンポーネントに関数を渡す唯一の方法です。} さらす({ テスト父クリック }) 戻り値 () => { 戻る ( <div> <button onClick={handelBtn}>子コンポーネントは値を親コンポーネントに渡します</button> </div> ) } } } デフォルトの子をエクスポート 要約する これで、vue3 のさまざまな構文形式の比較に関するこの記事は終了です。より関連性の高い vue3 構文形式の比較コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Linux でジャンクファイルをエレガントに削除する方法
>>: MySQLはライブラリ内の主キーなしでテーブルインスタンスコードを素早く取得します
Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...
背景Dockerでは、同じイメージを使用して4つのコンテナを作成します。ネットワークはブリッジモード...
目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...
この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...
この記事では、簡単なポップアップウィンドウ効果を実現するためのjQueryの具体的なコードを参考まで...
目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...
目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...
セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...
目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...
HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。...
Rancher のデプロイメントには、次の 3 つのアーキテクチャがあります。高可用性 Kubern...
注: システムは Ubuntu 14.04LTS、32 ビット オペレーティング システムです。Py...