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 バージョンのインストール チュートリアル (画像とテキスト付き)
序文インデックスの選択はオプティマイザ段階の作業であることはわかっていますが、オプティマイザは万能で...
現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...
リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...
目次1. 基本原則2. 特定のコード要約する1. 基本原則まず、生放送エリアを10の部分に分割し(個...
目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...
MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...
テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...
シェルスクリプトを使用したMySQLデータベースの自動バックアップデータベースを頻繁にバックアップす...
1: アドレス書き換えとアドレス転送の意味を理解する。アドレス書き換えとアドレス転送は異なる...
今日、VMware を使用してマシンに新しい仮想マシンをインストールしていたところ、次のように「この...
Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...
ここ2日間Javaを復習するつもりなので、練習にdubboを使ってショッピングモールプロジェクトを書...
ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...
目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...
CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...