鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue父子組件通信，props和自定義事件

vue父子組件通信，props和自定義事件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

?這上面的是vue官方文檔給出的父子通信組件的例子，是通過自定義事件實現(xiàn)的。
?我通過props 傳function方式實現(xiàn)相同的功能下面是代碼部分

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter :increment="incrementTotal"></button-counter>
  <button-counter :increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  props:{
     increment:{
         type:Function
         required:true
     }
  }
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      //this.$emit('increment')
      this.increment();
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

利用props特性一樣可以實現(xiàn)vue父子組件的通信，在這里我想問問props實現(xiàn)和自定義事件實現(xiàn)都能實現(xiàn)那么在項目開發(fā)的時候該選擇哪種方式呢，它們各有什么特點(diǎn)呢？我自己知道的就是通過自定義事件實現(xiàn)的配合vue-devtool工具方便調(diào)試，還有其他的嗎？

回答
編輯回答
愛是癌

文檔原話

組件設(shè)計初衷就是要配合使用的，最常見的就是形成父子組件的關(guān)系：組件 A 在它的模板中使用了組件 B。它們之間必然需要相互通信：父組件可能要給子組件下發(fā)數(shù)據(jù)，子組件則可能要將它內(nèi)部發(fā)生的事情告知父組件。然而，通過一個良好定義的接口來盡可能將父子組件解耦也是很重要的。這保證了每個組件的代碼可以在相對隔離的環(huán)境中書寫和理解，從而提高了其可維護(hù)性和復(fù)用性。
在 Vue 中，父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息?？纯此鼈兪窃趺垂ぷ鞯?。
  1. 這是作者設(shè)計的思想；
  2. 每個 api各司其職，props管數(shù)據(jù)通信，$on和 $emit管事件通信；
  3. 類似的問題可能還有，處理數(shù)據(jù)可以在 computed實現(xiàn) 也可以在 methods來實現(xiàn)，哪個好？
  4. 都是默默的遵循這個做法，或者設(shè)計思路；有自己的想法是好的，未來你可以用在自己造的框架上。
2017年12月1日 17:23
編輯回答
蝶戀花

其實吧。在滿足業(yè)務(wù)需求的情況下，不存在那種方法好不好，昨天還跟同事討論架構(gòu)員和業(yè)務(wù)員有什么本質(zhì)的區(qū)別，有一點(diǎn)就是架構(gòu)的人對實際業(yè)務(wù)的考量程度不同，應(yīng)該說，架構(gòu)人員對業(yè)務(wù)邏輯的支持度沒那么嚴(yán)格，也就存在一個東西有多個方式可以解決，架構(gòu)人員考慮的是整個框架邏輯的風(fēng)格，規(guī)范和最大化的去支持各種實現(xiàn)，就對于你這個問題，我又看了一遍文檔，作者提到了其中一個概念解耦，你說解耦有用嗎，對于你的業(yè)務(wù)，一點(diǎn)用都沒有，你自己都沒想過如何控制耦合度吧，但是人家不能因為有了自定義事件，就禁止props傳入事件，沒有這個道理的， 如果你在架構(gòu)自定義事件的時候去考慮props里面有相關(guān)實現(xiàn)的話，這個框架就寫不完了，也寫不下去了，好的框架是包容性的，當(dāng)然自定義事件也有自定義事件的用途，官網(wǎng)上就有好幾個特殊的用途，所以不要拿你的業(yè)務(wù)去考量一整個框架的思考， 寫的比較繁瑣，歡迎討論

2018年2月8日 09:10
編輯回答
柚稚

其實是個人習(xí)慣問題，都可以，我習(xí)慣用this.emit('parentFn', params)，提醒我是調(diào)用的父級組件的一個方法，事實上是可以把父級的一個方法當(dāng)作props函數(shù)類型變量傳遞給子組件的

props:{
 propA:{
  type: Function
 }
}

官網(wǎng)有說明：https://cn.vuejs.org/v2/guide...

2017年9月28日 11:32
編輯回答
擱淺

分享一個Vue.js 2 的全家桶系列教程：

1.vue.js 2 入門與提高 http://xc.hubwiz.com/course/5...
2.vuex 2 入門與提高 http://xc.hubwiz.com/course/5...
3.vue-router 2 入門與提高 http://xc.hubwiz.com/course/5...
4.vue.js 2 工程化實踐 http://xc.hubwiz.com/course/5...

2018年6月27日 21:20
編輯回答
玩控

謝邀。你這種寫法也倒是可以。不過我一般不這么用(個人喜好)
但是其實第一種寫法，@increment="incrementTotal",既可以拿到組件返回值，也可以當(dāng)做函數(shù)使用。
子組件this.$emit('increment',this.counter)
父組件

methods:{
    increment(param){
        this.counter=param;
        ...
    }
}
上面是個人用法。
2017年4月17日 23:28
編輯回答
萌二代

這樣可能會造成 this 作用域問題。你體會一下

2018年8月2日 09:31