Vueコンポーネントが相互に値を転送する方法の詳細な説明

// 親コンポーネント <user-detail :myName="name" />
    
エクスポートデフォルト{
    コンポーネント:
        ユーザー詳細
    }
    ......
}

// サブコンポーネントエクスポートデフォルト{
    プロパティ: ['myName']
}
​
/*
props: { myName: String } //この方法で渡される型を指定します。型が正しくない場合は警告が発行されます props: { myName: [String, Number] } // 複数の型が考えられます prosp: { myName: { type: String, requires: true } } //必須の文字列 props: { 
    子メッセージ: { 
        タイプ: 配列、 
        デフォルト: () => [] 
    }
} // default はデフォルト値を指定します。props の検証に失敗した場合は、コンソールに警告が表示されます。
*/

// サブコンポーネントエクスポートデフォルト{
    プロパティ: ['myName'],
    データ（） {
        戻る {
            name : this.myName // 渡された値を新しい変数に代入します}
    },
    時計：
        myName(新しい値) {
            this.name = newVal //親コンポーネントから渡された値をリッスンし、変更された場合は子コンポーネント内の値も変更します}
    },
    メソッド: {
        名前を変更する() {  
            this.name = 'Lily' // ここでは内部値のみが変更されるため、エラーは報告されません},
    }
}

// 子コンポーネント <button @click="changeParentName">親コンポーネントの名前を変更する</button>
​
エクスポートデフォルト{
    メソッド: {
        //サブコンポーネントイベント changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 親コンポーネントでhandleChangeイベントをトリガーし、それをJackに渡します
            // 注意: ここでのイベント名は、親コンポーネントにバインドされたイベント名と一致している必要があります}
    }
}

// 親コンポーネント <child @handleChange="changeName"></child>
​
メソッド: {
    changeName(name) { // nameパラメータは子コンポーネントJackから渡された値です
        this.name = 名前
    }
}

// 親コンポーネント <child :callback="callback"></child>
​
メソッド: {
    コールバック: 関数(名前) {
        this.name = 名前
    }
}

// 子コンポーネント <button @click="callback('Jack')">親コンポーネントの名前を変更する</button>
​
小道具: {
    コールバック: 関数、
}

// サブコンポーネントエクスポートデフォルト{
  データ （） {
    戻る {
      タイトル: 'サブコンポーネント'
    }
  },
  メソッド: {
    こんにちは（）{
        console.log('こんにちは');
    }
  }
}

// 親コンポーネント <テンプレート>
  <childref="childRef" />
</テンプレート>
​
<スクリプト>
  エクスポートデフォルト{
    作成された（）{
      // $ref を介して子コンポーネントにアクセスします console.log(this.$refs.childRef.title); // 子コンポーネント this.$refs.childRef.sayHello(); // Hello
      
      // $children を通じて子コンポーネントメソッドを呼び出す this.$children.sayHello(); // Hello 
    }
  }
</スクリプト>

// 親コンポーネント <child-a :myName="name" />
<child-b :myName="名前" @changeName="名前を編集" />  
    
エクスポートデフォルト{
    データ（） {
        戻る {
            名前: 'ジョン'
        }
    },
    コンポーネント:
        'child-a': 子A、
        'child-b': 子B、
    },
    メソッド: {
        editName(名前) {
            this.name = 名前
        },
    }
}

// 子 b コンポーネント<p>名前: {{ myName }}</p>
<button @click="changeName">名前を変更</button>
    
<スクリプト>
エクスポートデフォルト{
    プロパティ: ["myName"],
    メソッド: {
        名前を変更する() {
            this.$emit('changeName', 'Lily') // イベントをトリガーして値を渡す}
    }
}
</スクリプト>

// 子コンポーネント<p>名前: {{ newName }}</p>
    
<スクリプト>
エクスポートデフォルト{
    プロパティ: ["myName"],
    計算: {
        新しい名前() {
            if(this.myName) { // 渡された値があるかどうかを確認します return this.myName
            }
            return 'John' //値が渡されない場合はデフォルト値}
    }
}
</スクリプト>

'Vue' から Vue をインポートします
デフォルトの新しい Vue() をエクスポートします

<テンプレート>
    <div>
        <p>名前: {{ name }}}</p>
        <button @click="changeName">名前を変更</button>
    </div>
</テンプレート>
​
<スクリプト>
「../EventBus.js」から{EventBus}をインポートします。
​
エクスポートデフォルト{
 データ（） {
     戻る {
         名前: 'ジョン'、
     }
  },
  メソッド: {
      名前を変更する() {
          this.name = 'リリー'
          EventBus.$emit("editName", this.name) // グローバル イベントをトリガーし、変更された値をイベント関数に渡します}
    }
}
</スクリプト>

「../EventBus.js」から{EventBus}をインポートします。
​
エクスポートデフォルト{
    データ（） {
        戻る {
            名前： ''
        }
    },
    作成された() {
         EventBus.$on('editName', (名前) => {
             this.name = 名前
         })
    }
}

エクスポートデフォルト{
  provide: { // その機能は、変数 **name** をすべての子コンポーネントに提供することです。
    名前: 'ジャック'
  }
}

エクスポートデフォルト{
  inject: ['name'], // 親コンポーネントによって提供される名前変数を注入します。mounted() {
    console.log(this.name); // ジャック
  }
}

// 親コンポーネント <div>
      <button @click="changeName">名前を変更</button>
      <子-b />
</div>
<スクリプト>
    ......
    データ（） {
        戻る {
            名前: 「ジャック」
        };
    },
    提供する（） {
        戻る {
            parentObj: this // 祖先コンポーネントのインスタンスを提供する};
    },
    メソッド: {
        名前を変更する() {
            this.name = 'リリー'
        }
    }
</スクリプト>

<テンプレート>
  <div class="border2">
    <P>名前: {{parentObj.name}}</P>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    注入: {
      親オブジェクト: {
        デフォルト: () => ({})
      }
    } // または inject: ['parentObj']
  };
</スクリプト>