vueコンポーネント通信のいくつかの方式

vueコンポーネント通信

親伝子

//     Parent


import Child1 from '@/components/child1'
export default {
	components: { Child1 }
}

//     Child1



export default {
  props:[ 'title' ]
}

この方式は最も基礎的で、最も簡単な方式で、詳細は公式サイトを参照すればよい(vuejs-prop)

子伝父

//     Child



export default {
	  methods: {
	  		paramTransfer() {
				this.$emit('parensEvent', '       ')
			}
	  }
}

//    



import Child from '@/components/child'
	export default {
		components: {Child},
		methods: {
			 eventHandleName	(param) {
			      console.log(param) // param          
			 }
	  }
}

Vueは単一のデータストリームを推奨するため、サブコンポーネントが親要素伝達のデータを変更するには、$emitを使用して親要素伝達イベントをトリガーする親コンポーネントに変更を通知する必要があります.

兄弟コンポーネント通信

//            ，               

祖先子孫provide&inject

//     （             ，        ）



import Child1 from "@/components/child1"
export default {
  data () {
	return {
		param: { name: '     ' }
	}
  },
  provide: {  //         provide    
    name: '          '
  },
  // provide () { //       ，            ，     
  //   return {
  //	  param1: this.param
  //   }
  // }
  components: {Child1}
}

//      



export default {
	  inject: ['name'] //         inject   ，                
}

ここでは、親子間でpropsを介して要素をサブコンポーネントに渡すなど、階層が多いのが適しています.簡単ですが、Appでデータを子孫に渡す必要がある場合は、propsは面倒です.このときprovide&injectが登場します(このapiは公式サイトでは推奨されていない理由は、element-uiのソースコードなどのコンポーネントライブラリの設計に適しているからです).注意(provide&injectは応答式ではありません.サブ要素が祖先に通知したい場合はhackする必要があります.公式サイトによると、オブジェクトを渡すと、そのオブジェクトのデータは応答できます).コンポーネントでprovideを取得するにはthis.providedが入手できる

dispatchサブエレメントは、祖先にデータを渡す

main.js

//      ，        ，         Vue   
// dispatch   ，（          ，     element-ui   ）
Vue.prototype.$dispatch = function (eventName, data) {
  //       ，     
  let parent = this.$parent
  while (parent) { //          
    parent.$emit(eventName, data) //     ，     emit    ，   ，   parent    Vue  
    parent = parent.$parent //     ，      ，         parent，
  }
}

パラメータを渡すサブアセンブリ

export default {
  methods: {
    clickNoticeApp () {
      this.$dispatch('dispatchName', '  App，  child1        ')
    }
  }
}

パラメータを受信する祖先要素

export default {
  name: 'App',
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    this.$on('dispatchName', mes => {
      this.msg = mes // mes             
    })
  }
}

boardcast祖先要素想子要素伝達データ

main.js

// boardcast    （          ，     element-ui   ）
Vue.prototype.$boardcast = function (eventName, data) {
  //          ，     
  boardcast.call(this, eventName, data)
}
function boardcast (eventName, data) {
  this.$children.forEach(child => {
    // child          
    child.$emit(eventName, data)
    if (child) { //        ，     
      boardcast.call(child, eventName, data)
    }
  })
}

パラメータを渡す祖先要素

export default {
  name: 'App',
  methods: {
    clickNoticeChild () {
      this.$boardcast('boardcastName', '  App    ，             ')
    }
  }
}

パラメータを受け入れる子孫要素

export default {
  data () {
    return {
      message: ''
    }
  },
  mounted () {
    this.$on('boardcastName', data => {
      this.message = data
    })
  }
}
</code></pre> 
  <ol start="7"> 
   <li>event-bus   event-bus              </li> 
  </ol> 
  <h5>main.js</h5> 
  <pre><code>// class Bus {
//   constructor () {
//     this.callbacks = {}
//   }
//   $on (name, fn) {
//     this.callbacks[name] = this.callbacks[name] || []
//     this.callbacks[name].push(fn)
//   }
//   $emit (name, args) {
//     if (this.callbacks[name]) {
      //        callback
//       this.callbacks[name].forEach(cb => cb(args))
//     }
//   }
// }

// Vue.prototype.$bus = new Bus()
//         event-bus     ，      $on   $emit  ，
//    vue          ，       vue    

Vue.prototype.$bus = new Vue()
</code></pre> 
  <h5>       </h5> 
  <pre><code><template>
  <div id="app">
    <router-view />
    <div @click="clickEventBus">  App    ，     eventBus    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  methods: {
    clickEventBus () {
      this.$bus.$emit('eventBus', '  Event-bus    ')
    }
  },
}

データを受け入れるコンポーネント

export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    this.$bus.$on('eventBus', mes => { // msg       
      this.msg = mes
    })
  }
}

vuex(このような方式でデータを伝達するのはプロジェクトで運用されることも多いが、具体的な使い方は公式サイトを参照すればよい.ここでは例を挙げない)

最近vueのいくつかの知识を整理したいと思って、みんなに役に立つことを望んで、その他の通信方式の子供靴があって、伝言を歓迎します...