vue親子コンポーネント通信の問題

1558 ワード

vueを使用する場合、親子コンポーネント間の通信が必要な場合は、公式ドキュメントを参照すると、サブコンポーネントがpropsオプションで所望のデータを明示的に宣言し、使用中に対応するデータを入力するだけでよいことがわかります.たとえば、次のようになります.
Vue.component('child', {
  //    props
  props: ['message'],
  //    data   ,prop        
  //        vm     “this.message”    
  template: '{{ message }}'
})


もちろん、これは簡単な例にすぎません.実際の使用中に、サブコンポーネントに転送データのタイプとデフォルト値を宣言することもできます.これらは説明を展開せず、公式ドキュメントを参照しても満足できる答えを見つけることができます.
vueではpropは一方向にバインドされます.親コンポーネントの属性が変化すると、サブコンポーネントに伝達されますが、逆にはなりません.これは、サブコンポーネントが親コンポーネントの状態を意図的に変更しないようにするためです.これにより、アプリケーションのデータ・ストリームが理解しにくくなります.したがって、サブコンポーネントで親コンポーネントにいくつかの情報を伝えるには、vm.$emitという別の方法が必要です.
Vue.component('child', {
  //    props
  props: ['message'],
  //    data   ,prop        
  //        vm     “this.message”    
  template: '{{ message }}',
  methods: {
    triggerEvent() {
      //              
      this.$emit('eventName', args)
    }
  }
})



以上は一般的な方法で、公式のドキュメントでも詳しく紹介されています.しかし、以前の使用中に、親コンポーネントでサブコンポーネントをトリガーする方法が必要でしたが、この場合どうすればいいですか?ドキュメントを参照するときに有効な方法は見つかりませんでした.その後、資料を参照すると、refを使用してサブコンポーネントにインデックスを指定し、インデックスを使用してサブコンポーネントのイベントを取得できます.例:

this.$refs.child.childEventName
//                  

(end)