1. provideとinjectの説明
2. provideとinjectの使用
3. 親コンポーネント <テンプレート> <erzi-com></erzi-com> </テンプレート> <script lang="ts"> 「../components/ErZi.vue」からErZiをインポートします。 「vue」から{provide, ref}をインポートします エクスポートデフォルト{ 名前:"概要", コンポーネント:{ 'erzi-com':エルジ }, 設定(){ giveSunziData=ref({ 100、 高さ:50, bg:'ピンク' }) // 最初のパラメータは共有データの名前です (giveSunzi) // 2 番目のパラメータは共有データ (giveSunziData) です 提供する('Sunzi'、SunziDataを提供する) } } </スクリプト>
4. 息子コンポーネント <テンプレート> <div> <h2>息子のコンポーネント</h2> <div>値を取得: {{getFaytherData}}</div> </div> <hr/> <sun-con></sun-con> </テンプレート> <script lang="ts"> 'vue' から defineComponent をインポートし、 inject します。 「./SunZI.vue」からSunZIをインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'ErZi'、 コンポーネント:{ 'sun-con':SunZI }, 設定(){ getFaytherData = inject('giveSunzi'); を取得します。 戻り値: getFaytherData } }); </スクリプト> 5. 孫コンポーネント <テンプレート> <div> <h2>孫コンポーネント</h2> <div>取得された値は {{getYeYeData} です。}</div> </div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent,inject} をインポートします。 エクスポートデフォルトdefineComponent({ 設定(){ getYeYeData=inject('giveSunzi'); を取得します。 戻り値: getYeYeData } }); </スクリプト> 6. レンダリング 7. 親コンポーネントは複数のプロバイダーを渡すことができますか?
8. rovideとinjectの参照シナリオ
これで、vue3 での provide と inject の使用に関するこの記事は終了です。vue provide と inject の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)
Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...
問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...
前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカーHTML のリンクの...
JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...
フォームのアクションは URL ジャンプとは異なります。フォームはバックグラウンドにデータを渡すこと...
背景前景要素から特定の色を継承する影の効果を作成する方法を知りたいと思ったことはありませんか?方法に...
4 つのネットワーク タイプ:なし: コンテナのネットワーク機能を一切設定しません。--net=no...
MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...
MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...
目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...
まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...
目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...
MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...
アメリカのYAHOOがページ制作で使用している画像統合技術。これらのアイコン、列背景、画像ボタンを定...