公式ウェブサイト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データベースに接続する方法
エラーメッセージ:ユーザー: 'root' ホスト: `localhost'...
システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...
1. 問題MySQL の初期化時に発生する問題は、次のとおりです。 1. 「MSVCR120.dll...
ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...
目次1. ループオブジェクト内の値2. ループオブジェクト3. キーと値のループ1. ループオブジェ...
他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...
この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...
LinuxサーバーのデフォルトのSSHポート番号は通常22なので、ほとんどのユーザーはセキュリティ上...
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...
1) jdkファイルが保存されているフォルダパスを入力します私はここにいますusr/local/jd...
var() の紹介と使用法詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効ですvar()...
この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...