公式ウェブサイトhttps://cli.vuejs.org/ja/ガイド/ 場合によっては、コンポーネントのテンプレートの一部が論理的にはそのコンポーネントに属していることもありますが、技術的な観点からは、テンプレートのその部分を Vue アプリ外の DOM 内の別の場所に移動する方が適切です。 場合両方のコンポーネントは親要素にあり、親コンポーネントの子ですが、技術的な観点からは、ボディの下にマウントする必要があります。 修正なしバージョン <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>Vue3</title> <script src="./vue.js"></script> </head> <本文> <div id="hello-vue" クラス="box"> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <button @click="handleClick">クリックするとサブコンポーネントが表示されます</button> <cpn ref="compRef" @show-confirm="showConfirm"></cpn> <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="終了してもよろしいですか?"></confirm> </div> <!--ボタンをクリックした後に表示されるコンポーネント--> <テンプレートid="mycpn"> <トランジション名="リストフェード"> <div class="cpnContainer" v-show="isshow" @click.stop="handleClose()"> <div class="inner-wrapper" @click.stop> トランジションの使用 <div class="text"> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> </div> <div class="close" @click="handleClose()">閉じる</div> </div> </div> </トランジション> </テンプレート> <!--確認コンポーネントを閉じるには確認します--> <テンプレートid="確認"> <transition name="確認フェード"> <div v-show="isshow" class="confirm"> <div class="confirm-wrapper"> <div class="コンテンツを確認"> <p>{{テキスト}}</p> <div class="btnContainer"> <button style="background-color: darkseagreen;margin-right: 40px" @click="confirm">{{confirmBtnText}}</button> <button @click="cancel">{{cancelBtnText}}</button> </div> </div> </div> </div> </トランジション> </テンプレート> <スクリプト> 定数cpn = { テンプレート: "#mycpn", プロパティ: {}, データ() { 戻る { // bbb: 145612 isshow:false } }, メソッド: { 見せる() { this.isshow = true }, 隠れる() { // console.log("非表示") this.isshow = false }, ハンドルクローズ() { // console.log("非表示") this.$emit("表示確認") }, } } 定数確認 = { テンプレート: "#confirm", 小道具: { 文章: { タイプ: 文字列、 デフォルト: 'fdsafdasfdas' }, 確認ボタンテキスト: { タイプ: 文字列、 デフォルト: 'OK' }, キャンセルボタンテキスト: { タイプ: 文字列、 デフォルト: 'キャンセル' } }, データ() { 戻る { // bbb: 145612 isshow: false } }, メソッド: { 見せる() { this.isshow = true }, 隠れる() { this.isshow = false //サブコンポーネントの表示を制御する}, // ボタンをクリックした後、親コンポーネントにイベント confirm() をディスパッチします { これを非表示にします。 this.$emit("確認") }, キャンセル() { これを非表示にする() this.$emit('キャンセル') } } } 定数 HelloVueApp = Vue.createApp({ データ() { 戻る { メッセージ: 'Hello Vue!!' } }, コンポーネント: cpn、 確認する }, メソッド: { ハンドルクリック() { // 親コンポーネントは子コンポーネントのメソッドを呼び出します // this.$refs.compRef.show() this.$refs.compRef.show() }, 確認を表示(){ コンソールログ("fdsa") this.$refs.confirmRef.show() }, // キャンセルまたは確認をクリックして次のロジックを実行します handleConfirm() { this.$refs.compRef.hide() }, ハンドルキャンセル() { } } }).mount("#hello-vue") </スクリプト> </本文> <スタイル> * { フォントサイズ: 50px; } /*vue 組み込みトランジション*/ .list-fade-enter-active、.list-fade-leave-active { 遷移: 不透明度 .3 秒; } .list-fade-enter-active .inner-wrapper、.list-fade-leave-active .inner-wrapper { 遷移: すべて .3; } .list-fade-enter-from、.list-fade-leave-to { 不透明度: 0; } .list-fade-enter-from .inner-wrapper、.list-fade-leave-to .inner-wrapper { 変換: translate3d(0, 100%, 0); } /*サブコンポーネントスタイル*/ .cpnコンテナ{ 位置: 固定; 上: 0; 下部: 0; 左: 0; 右: 0; 背景: rgba(0, 0, 0, .3); } .インナーラッパー{ パディング: 70px; 背景色: ダークシアン; 位置: 固定; 下部: 0; 幅: 100%; ボックスのサイズ: 境界線ボックス; } 。近い { 位置: 絶対; 上: 50px; 右: 50px; } /*コンポーネントのスタイルを確認*/ 。確認する { 位置: 固定; 上: 0; 下部: 0; 左: 0; 右: 0; 背景色: rgba(0, 0, 0, 0.14); } .btnコンテナ{ パディング: 0 70px; } .確認ラッパー{ 位置: 絶対; 上位: 50%; 左: 50%; 変換: translate(-50%, -50%); zインデックス: 999; ボックスの影: 0px 0px 80px 3px rgba(0, 0, 0, 0.2); } .内容確認{ オーバーフロー: 非表示; 幅: 600ピクセル; 境界線の半径: 13px; 背景: 白 } .confirm-content p { 表示: ブロック; 左パディング: 40px; } /*.内容確認{*/ /* 境界線の半径: 8px;*/ /* ボックスシャドウ: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);*/ /* 位置: 絶対;*/ /* 上: 50%;*/ /* 残り: 50%;*/ /* 変換: translate(-50%, -50%);*/ /* !*p タグの上部の余白は親要素 bfc に影響します*!*/ /* !*オーバーフロー: 非表示;*!*/ /* 背景色: 白;*/ /*}*/ .confirm-content ボタン { 境界線: 1px 実線 コーンフラワーブルー; 背景色: 透明; パディング: 25px 50px; 下部マージン: 30px; 境界線の半径: 5px; } .confirm-fade-enter-active、.confirm-fade-leave-active { 遷移: すべて .3; } .confirm-fade-enter-from 、.confirm-fade-leave-to{ 不透明度: 0; } .confirm-fade-enter-active .confirm-content { アニメーション: ズームイン確認 .3s; 変換の原点: 中心; } .confirm-fade-leave-active .confirm-content { アニメーション: ズームアウトの確認 .3 秒; 変換の原点: 中心; } @keyframes ズームイン確認 { 0% { 変換: スケール(0); } 60% { 変換: スケール(1.1); } 100% { 変換: スケール(1); } } @keyframes ズームアウトの確認 { 0% { 変換: スケール(1); } 30% { 変換: スケール(0.4); } 100% { 変換: スケール(0); } } </スタイル> </html> レイアウト 修正版 レイアウト <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>Vue3</title> <script src="./vue.js"></script> </head> <本文> <div id="hello-vue" クラス="box"> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <div>私は親コンポーネントです</div> <button @click="handleClick">クリックするとサブコンポーネントが表示されます</button> <cpn ref="compRef" @show-confirm="showConfirm"></cpn> <confirm ref="confirmRef" @confirm="handleConfirm" @cancel="handleCancel" text="終了してもよろしいですか?"></confirm> </div> <!--ボタンをクリックした後に表示されるコンポーネント--> <テンプレートid="mycpn"> <テレポート先="body"> <トランジション名="リストフェード"> <div class="cpnContainer" v-show="isshow" @click.stop="handleClose()"> <div class="inner-wrapper" @click.stop> トランジションの使用 <div class="text"> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> <div>私はインナーテキストです</div> </div> <div class="close" @click="handleClose()">閉じる</div> </div> </div> </トランジション> </テレポート> </テンプレート> <!--確認コンポーネントを閉じるには確認します--> <テンプレートid="確認"> <テレポート先="body"> <transition name="確認フェード"> <div v-show="isshow" class="confirm"> <div class="confirm-wrapper"> <div class="コンテンツを確認"> <p>{{テキスト}}</p> <div class="btnContainer"> <button style="background-color: darkseagreen;margin-right: 40px" @click="confirm">{{confirmBtnText}}</button> <button @click="cancel">{{cancelBtnText}}</button> </div> </div> </div> </div> </トランジション> </テレポート> </テンプレート> <スクリプト> 定数cpn = { テンプレート: "#mycpn", プロパティ: {}, データ() { 戻る { // bbb: 145612 isshow: false } }, メソッド: { 見せる() { this.isshow = true }, 隠れる() { // console.log("非表示") this.isshow = false }, ハンドルクローズ() { // console.log("非表示") this.$emit("表示確認") }, } } 定数確認 = { テンプレート: "#confirm", 小道具: { 文章: { タイプ: 文字列、 デフォルト: 'fdsafdasfdas' }, 確認ボタンテキスト: { タイプ: 文字列、 デフォルト: 'OK' }, キャンセルボタンテキスト: { タイプ: 文字列、 デフォルト: 'キャンセル' } }, データ() { 戻る { // bbb: 145612 isshow: false } }, メソッド: { 見せる() { this.isshow = true }, 隠れる() { this.isshow = false //サブコンポーネントの表示を制御する}, // ボタンをクリックした後、親コンポーネントにイベント confirm() をディスパッチします { これを非表示にします。 this.$emit("確認") }, キャンセル() { これを非表示にする() this.$emit('キャンセル') } } } 定数 HelloVueApp = Vue.createApp({ データ() { 戻る { メッセージ: 'Hello Vue!!' } }, コンポーネント: cpn、 確認する }, メソッド: { ハンドルクリック() { // 親コンポーネントは子コンポーネントのメソッドを呼び出します // this.$refs.compRef.show() this.$refs.compRef.show() }, 確認を表示(){ コンソールログ("fdsa") this.$refs.confirmRef.show() }, // キャンセルまたは確認をクリックして次のロジックを実行します handleConfirm() { this.$refs.compRef.hide() }, ハンドルキャンセル() { } } }).mount("#hello-vue") </スクリプト> </本文> <スタイル> * { フォントサイズ: 50px; } /*vue 組み込みトランジション*/ .list-fade-enter-active、.list-fade-leave-active { 遷移: 不透明度 .3 秒; } .list-fade-enter-active .inner-wrapper、.list-fade-leave-active .inner-wrapper { 遷移: すべて .3; } .list-fade-enter-from、.list-fade-leave-to { 不透明度: 0; } .list-fade-enter-from .inner-wrapper、.list-fade-leave-to .inner-wrapper { 変換: translate3d(0, 100%, 0); } /*サブコンポーネントスタイル*/ .cpnコンテナ{ 位置: 固定; 上: 0; 下部: 0; 左: 0; 右: 0; 背景: rgba(0, 0, 0, .3); } .インナーラッパー{ パディング: 70px; 背景色: ダークシアン; 位置: 固定; 下部: 0; 幅: 100%; ボックスのサイズ: 境界線ボックス; } 。近い { 位置: 絶対; 上: 50px; 右: 50px; } /*コンポーネントのスタイルを確認*/ 。確認する { 位置: 固定; 上: 0; 下部: 0; 左: 0; 右: 0; 背景色: rgba(0, 0, 0, 0.14); } .btnコンテナ{ パディング: 0 70px; } .confirm-wrapper{ 位置: 絶対; 上位: 50%; 左: 50%; 変換: translate(-50%, -50%); zインデックス: 999; ボックスの影: 0px 0px 80px 3px rgba(0, 0, 0, 0.2); } .内容確認{ オーバーフロー: 非表示; 幅: 600ピクセル; 境界線の半径: 13px; 背景: 白 } .confirm-content p { 表示: ブロック; 左パディング: 40px; } /*.内容確認 {*/ /* 境界線の半径: 8px;*/ /* ボックスシャドウ: 0px 0px 80px 3px rgba(0, 0, 0, 0.2);*/ /* 位置: 絶対;*/ /* 上: 50%;*/ /* 残り: 50%;*/ /* 変換: translate(-50%, -50%);*/ /* !*p タグの上部の余白は親要素 bfc に影響します*!*/ /* !*オーバーフロー: 非表示;*!*/ /* 背景色: 白;*/ /*}*/ .confirm-content ボタン { 境界線: 1px 実線 コーンフラワーブルー; 背景色: 透明; パディング: 25px 50px; 下部マージン: 30px; 境界線の半径: 5px; } .confirm-fade-enter-active、.confirm-fade-leave-active { 遷移: すべて .3; } .confirm-fade-enter-from 、.confirm-fade-leave-to{ 不透明度: 0; } .confirm-fade-enter-active .confirm-content { アニメーション: ズームイン確認 .3s; 変換の原点: 中心; } .confirm-fade-leave-active .confirm-content { アニメーション: ズームアウトの確認 .3 秒; 変換の原点: 中心; } @keyframes ズームイン確認 { 0% { 変換: スケール(0); } 60% { 変換: スケール(1.1); } 100% { 変換: スケール(1); } } @keyframes ズームアウトの確認 { 0% { 変換: スケール(1); } 30% { 変換: スケール(0.4); } 100% { 変換: スケール(0); } } </スタイル> </html> この事件で使用された知識親コンポーネントはどのようにして子コンポーネントのメソッドを呼び出すのでしょうか? ref を使用してコンポーネントを取得し、コンポーネント内のメソッドを呼び出します。 これで、vue3 テレポートの使用デモに関するこの記事は終了です。vue3 テレポートの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)
>>: Navicatをサーバー上のdockerデータベースに接続する方法
私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...
mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...
複数のデータベースをバックアップするには、次のコマンドを使用できます。 mysqldump -uro...
序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...
MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...
この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...
目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...
整合性制約整合性制約はテーブル データの正確性を保つためのものです。データが正しくない場合は、そもそ...
さっそくAlibaba の oracle11g イメージをプルして構成する docker の記録を開...
オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...
1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...
目次スロークエリログとは何ですか?スロークエリを有効にする方法ログ分析ツール mysqldumpsh...
テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...