以下に各コンポーネント通信方式の記述方法を一つずつ列挙する。 1. 小道具親コンポーネントが子コンポーネントにデータを送信します。これは最も一般的に使用される方法です。子コンポーネントがデータを受信した後、親コンポーネントのデータを直接変更することはできません。エラーが報告されるため、親コンポーネントが再レンダリングされると、データが上書きされます。サブコンポーネントを変更する場合は、 // Parent.vue は <template> を転送します <child :msg="メッセージ"></child> </テンプレート> // Child.vue はエクスポート デフォルトを受け取ります { //書き方1: 配列を使用して props:['msg'] を受け取る // 書き方2: オブジェクトを使用して受信すると、受信するデータ型を制限したり、デフォルト値を設定したり、検証したりすることができます。 props:{ メッセージ:{ タイプ:文字列、 デフォルト: 'これはデフォルトのデータです' } }, マウントされた(){ コンソールログ(このメッセージ) }, } 2. .sync親コンポーネントから子コンポーネントに渡されるデータの双方向バインディングを実現できるため、子コンポーネントはデータを受け取った後すぐにデータを変更でき、同時に親コンポーネントのデータも変更できます。 // 親.vue <テンプレート> <child :page.sync="ページ"></child> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { ページ:1 } } } // 子.vue エクスポートデフォルト{ プロパティ:["ページ"], 計算された(){ // 子コンポーネントの currentPage を変更すると、親コンポーネントのページも変更されます currentPage { 得る(){ このページを返す }, set(newVal){ this.$emit("update:page", newVal) } } } } </スクリプト> 3. Vモデル
// 親.vue <テンプレート> <子 v-model="値"></子> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { 値:1 } } } // 子.vue <テンプレート> <input :value="値" @input="ハンドラ変更"> </テンプレート> エクスポートデフォルト{ プロパティ:["値"], // イベント名を変更できます。デフォルトは入力です モデル:{ イベント:"updateValue" }, 方法:{ ハンドラの変更(e){ this.$emit("入力", e.target.value) を実行します。 // 上に名前変更がある場合は、次のようになります。$emit("updateValue", e.target.value) } } } </スクリプト> 4. 参照ref が通常の // 子.vue エクスポートデフォルト{ データ(){ 戻る { 名前:「ムーファ」 } }, 方法:{ いくつかのメソッド(メッセージ){ コンソール.log(メッセージ) } } } // 親.vue <テンプレート> <child ref="child"></child> </テンプレート> <スクリプト> エクスポートデフォルト{ マウントされた(){ const 子 = this.$refs.child console.log(child.name) // Muhuachild.someMethod("子コンポーネントのメソッドが呼び出されました") } } </スクリプト> 5. $emit / v-on子コンポーネントはイベントをディスパッチして親コンポーネントにデータを送信したり、親コンポーネントの更新やその他の操作をトリガーしたりします。 // Child.vue ディスパッチエクスポートデフォルト { データ(){ return { msg: "これは親コンポーネントに送信されたメッセージです" } }, メソッド: { ハンドルクリック(){ this.$emit("sendMsg",this.msg) } }, } // Parent.vue は <template> に応答します <child v-on:sendMsg="getChildMsg"></child> // または省略形 <child @sendMsg="getChildMsg"></child> </テンプレート> エクスポートデフォルト{ 方法:{ getChildMsg(メッセージ){ console.log(msg) // これは親コンポーネントが受信したメッセージです} } } 6. $attrs / $listenersネストされたコンポーネントの複数の層がデータを渡す場合、親コンポーネントが孫コンポーネントにデータを渡すときなど、中間処理を実行せずにデータのみを渡す場合に使用できます。 $listeners: 使い方は同じです // 親.vue <テンプレート> <child :name="名前" title="1111" ></child> </テンプレート エクスポートデフォルト{ データ(){ 戻る { 名前:「ムーファ」 } } } // 子.vue <テンプレート> // 孫コンポーネントに渡し続ける <sun-child v-bind="$attrs"></sun-child> </テンプレート> エクスポートデフォルト{ props:["name"], // これは受信することも受信しないこともできます。mounted(){ // props が name を受け取った場合は { title:1111 } になり、それ以外の場合は { name:"Muhua", title:1111 } になります。 console.log(this.$attrs) } } 7. $children / $parent $children:すべての子コンポーネント (孫コンポーネントを除く) を含む // 親.vue エクスポートデフォルト{ マウントされた(){ this.$children[0].someMethod() // 最初の子コンポーネントのメソッドを呼び出す this.$children[0].name // 最初の子コンポーネントのプロパティを取得する } } // 子.vue エクスポートデフォルト{ マウントされた(){ this.$parent.someMethod() //親コンポーネントのメソッドを呼び出す this.$parent.name //親コンポーネントのプロパティを取得する} } 8. 提供する/注入する
提供:子孫コンポーネントに提供したいデータやメソッドを指定できます // 親コンポーネント export default{ // メソッド 1 はメソッド provide:{ 内のメソッドを取得できません。 名前:"Muhua", age: this.dataのプロパティ}, // 方法 2 ではデータ内の属性を取得できません provide(){ 戻る { 名前:"Muhua", someMethod:this.someMethod // メソッド内のメソッド } }, 方法:{ いくつかのメソッド(){ console.log("これは注入方法です") } } } // 子孫コンポーネントエクスポートデフォルト{ 挿入:["名前","何らかのメソッド"], マウントされた(){ console.log(この名前) this.someMethod() } } 9. イベントバス
/方法1: // これを別の js ファイル Bus.js に抽出し、必要な場所にインポートします // Bus.js 「vue」からVueをインポートします デフォルトの新しい Vue() をエクスポートします 方法2: グローバルに直接マウントする // メイン.js 「vue」からVueをインポートします Vue.prototype.$bus = 新しいVue() 方法3: Vueルートオブジェクトに注入する // メイン.js 「vue」からVueをインポートします 新しいVue({ el:"#アプリ", データ:{ バス: 新しい Vue() } }) 使用法は以下のとおりです。オンデマンド導入の例として方法1を挙げます。 // カスタムイベントを外部に送信する必要があるコンポーネント内 <template> <button @click="handlerClick">ボタン</button> </テンプレート> 「./Bus.js」からBusをインポートします。 エクスポートデフォルト{ 方法:{ ハンドラクリック(){ // カスタムイベント名 sendMsg Bus.$emit("sendMsg", "これは外部に送信されるデータです") } } } // 外部イベントを受信する必要があるコンポーネントで「./Bus.js」からBusをインポートします エクスポートデフォルト{ マウントされた(){ // イベントトリガーをリッスンする Bus.$on("sendMsg", data => { console.log("これは受信したデータです:", data) }) }, beforeDestroy(){ //監視をキャンセル Bus.$off("sendMsg") } } 10. ヴュークス
たとえば、次のようなファイル構造を作成します。 index.js の内容は次のとおりです。 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします './getters' からゲッターをインポートします './actions' からアクションをインポートします './mutations' から変異をインポートします './state' から状態をインポートします './modules/user' からユーザーをインポートします Vue.use(Vuex) 定数ストア = 新しい Vuex.Store({ モジュール: ユーザー }, ゲッター、 行動、 突然変異、 州 }) デフォルトストアをエクスポート 次に、main.js にインポートします。 「vue」からVueをインポートします 「./store」からストアをインポートします。 新しいVue({ el:"#アプリ", 店、 レンダリング: h => h(App) }) 次に、必要なコンポーネントで次の操作を実行します。 「vuex」から { mapGetters, mapMutations } をインポートします。 エクスポートデフォルト{ 計算:{ // 方法 1 次にこれを使用します。プロパティ名...mapGetters(["getters.js プロパティ 1 を導入する", "プロパティ 2"]) // メソッド 2...mapGetters("user", ["ユーザー モジュールの属性 1", "属性 2"]) }, 方法:{ // 方法 1 次にこれを使用します。プロパティ名...mapMutations(["mutations.js からの方法 1","方法 2"]) // メソッド 2...mapMutations("user",["ユーザー モジュールからのメソッド 1","メソッド 2"]) } } // または、次のように this.$store.state.xxx を取得することもできます this.$store.state.user.xxx 11. $ルート
12. スロット子コンポーネントのデータをスロットを介して親コンポーネントに渡し、それを元に戻す // 子.vue <テンプレート> <div> <スロット:user="ユーザー"></スロット> </div> </テンプレート> エクスポートデフォルト{ データ(){ 戻る { ユーザー:{ 名前:"Muhua" } } } } // 親.vue <テンプレート> <div> <子 v-slot="スロットプロパティ"> {{ slotProps.user.name }} </子> </div> </テンプレート> 以上で、Vue2.x の 12 種類のコンポーネント通信についての説明は終了です。Vue2.x のコンポーネント通信に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Intelli Idea で Tomcat 設定が見つからない問題の解決方法
この記事では、マウスを動かしたときにセカンダリ メニュー バーを実装するために HTML+CSS を...
MySQL 5.7 のインストール私たちは学校で MySQL データベースを学んでいます。先生は私た...
目次1. タスクキュー2. 混乱を招く問題を説明する1. setTimeout(f1,0)とは何です...
方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...
目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...
最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...
目次1. 理論シリアル化可能繰り返し読み取りコミットされた読み取りコミットされていない読み取り2. ...
目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
目次node.js+nvm+npm を設定するnpmスイッチタオバオミラーVue.jsをインストール...
Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...
効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...
少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
序文: Vue3.0はechartsの3次元縦棒グラフを実装します結果: 実装手順: 1. echa...