みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法についてお話します。 1: シンプルバージョンのコードは次のとおりです。親コンポーネント: <テンプレート> <div> // 3: 子コンポーネントを使用し、v-model を使用して <About v-model="father"/> をバインドします。 </div> </テンプレート> <スクリプト> // 1: サブコンポーネントをインポートします。import About from "./About"; エクスポートデフォルト{ // 2: サブコンポーネントを登録する: { について、 }, データ() { 戻る { // 空の父親の値:'' } }, //コンポーネントデータの変更を監視する watch:{ 父(val){ コンソールログ(val); } } }; </スクリプト> サブコンポーネント: <テンプレート> <div> // 2: v-model を使用して <input type="text" v-model="son"> をバインドします。 </div> </テンプレート> <スクリプト> エクスポートデフォルト{ // 1: 親コンポーネントから情報プロパティを受け取る: { 価値:{ タイプ:文字列、 デフォルト:'' } }, データ() { 戻る { // 3: 空の値を代入する:'' } }, // 4: 変更をリッスンする watch:{ // 息子に値を割り当てる 価値(){ // ここで this.value は props の値です this.son = this.value }, // 親コンポーネントにsonを渡すson(){ this.$emit('input',this.son) } } } </スクリプト> 子コンポーネントが親コンポーネントに渡されるときに $emit の最初のパラメータが 'input' である理由については、興味のある方は v-model 実装の原則について学ぶことができます。 2: プロジェクト内での使用に移りましょう(子コンポーネントの画像アドレスを取得し、親コンポーネントに渡し、画像情報を同期的に更新します)基本的に同じ Ⅰ: 親コンポーネントに子コンポーネントを導入し、子コンポーネントタグでv-modelを使用して空の値を割り当てる Ⅱ: 次に、props を使用して子コンポーネントで受け取ります。 III: サブコンポーネントページでも v-model を使用し、データに空のイメージを割り当てます。 IV: サブコンポーネントの変更を監視するためにwatchを使用する 分解図のコード: value 関数は、渡された親コンポーネントを子コンポーネントに割り当てます。This.value は props の値です。 価値() { this.SonStaffPhoto = this.value console.log(this.SonStaffPhoto) } これはv-modelにバインドされた子コンポーネント関数であり、親コンポーネントに渡すために使用されます。 息子スタッフ写真() { this.$emit('input', this.SonStaffPhoto) }, この時点で、親コンポーネントに渡したいコンテンツを this.SonStaffPhoto に割り当てることができます(画像アドレスを格納する変数に割り当てました) V: 親コンポーネントの変更を監視することもできます。 親コンポーネントの This.staffPhoto にも、バインドするコンテンツを割り当てることができます (子コンポーネントの画像が更新され、親コンポーネントも同期的に更新されるように、最新の画像変数に割り当てました) 要約するこれで、Vue で v-model を使用したクロスコンポーネントバインディングの基本的な実装方法についての記事は終了です。Vue で v-model を使用したクロスコンポーネントバインディングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysqlは昨日の日付、今日の日付、明日の日付、前の時間と次の時間の時刻を取得します
>>: Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する
この記事では、例を使用して、MySQL マスター/スレーブ レプリケーションと読み取り/書き込み分離...
これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...
背景以前、当社のプロジェクト チームは、Windows、Linux、macOS の 3 つの主要なオ...
1. はじめにWeb プロジェクトを Linux サーバーで公開する場合、SSL 証明書を構成する必...
1.Jenkinsのインストール手順: https://www.jb51.net/article/1...
<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...
目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...
ここでは、通常ヘッダーとフッターに対して行われるインクルード ファイルを使用している可能性があります...
問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...
1. 1.ngx_stream_proxy_moduleモジュールのproxy_passディレクティ...
まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...
0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...
構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...