VUE がデータを送信する方法

Vue コンポーネント間のデータ転送にはいくつかの方法があります。

1. 親コンポーネントは props を使用して子コンポーネントを渡します。

// 親コンポーネント

<テンプレート>

<div class="アプリコンテナ">

<div class="box">

<Children :msg="message" ></Children> ///Children はサブコンポーネントであり、サブコンポーネントに情報を渡します。

</div>

</div>

</テンプレート>

//父親の情報エクスポートdefault { data(){ return{ message:'123112', userinfo:{name:'wsc',age:18}, } },
//サブコンポーネント定義によって受け取られたカスタム プロパティは、
デフォルトをエクスポートします { 
  props:['msg'] 
}
// 
<template>を呼び出します
  <div class="left-container"> 
    <h3>子コンポーネント</h3> 
    <p>メッセージの値は { 
   
   {msg}} です</p> 
  </div> 
< /template>

2. 子コンポーネントを親コンポーネントに渡し、$emit を使用してイベントをディスパッチします。

//サブコンポーネントの
メソッド: { 
    add(){ 
      this.count++ 
　　　　//値を countChange に渡します
      this.$emit('count',this.count) 
    } 
  }

//親コンポーネント
<template> 
  <div class="app-container"> 
    <h1>親コンポーネント</h1> 
    <div class="box"> 
　　　　// @countChange を通じて子コンポーネントから渡された値を受け取り、それを代入しますgetCount メソッド
      <Children @count='getCount'></Children> 
    </div> 
  </div> 
</template>へ

メソッド:{ 
//データを取得
    getNewCount(val){ 
        this.countFromSon=val 
    } 
  }

3. その他

1.バスバス、レスポンシブをサポートしていません

(1) main.js は空の Vue インスタンスを定義します

Vue.prototype.$bus = 新しい Vue()

(2) 差出人

メソッド:{ 
    send(row){ 
      this.$bus.$emit('reject',row) 
    } 
  }

(3) 受取人

mount() { 
      this.$bus.$on('reject',(row)=>{ 
          this.info=row 
      }) 
    }

2.ウィンドウ.親

渡します: window.parent.parameter name

window.parent.functionName(パラメータ1, パラメータ2, ...)

受け入れる: window.parameter 名

window.関数名 = (パラメータ 1, パラメータ 2, ...) => {

関数の実行

}

3.ref

// 输
</template> 
<div> 
   <a-button @click='handleEvent(record)'>{ 
   
   { text }}</a-button> 
   <Event ref='eventForm' @ok='eventFormOk'>< /Event> 
 </div> 
</template> 

handleEvent(record) { 
  this.$refs.eventForm.edit(record) 
},

// <Event> インターフェイスを受け入れます

メソッド: { 
  edit(record) { 

     console.log(record) //受信データ
  }, 
}

4. Vuex 状態マネージャー (パラメーターを渡し、リアルタイムでデータを更新するには、vue public メソッドを参照してください)

VUE がデータを送信する方法

おすすめ