Vue 2中實作父子元件無限循環的方法：使用插槽

Question

我需要從父元件中呼叫子元件的一個方法。然而，我在子組件中做的一些事情似乎導致了一個無限循環。我嘗試過查看其他問題，雖然它們似乎正在解決類似的問題，但我無法將它們的確切模式應用到我面臨的問題上，它似乎是不同的。我只是不確定我在看什麼。我有兩個元件，一個叫做ToggleButtons，另一個被簡化為一個按鈕。這是ToggleButtons：

P粉727531237 · Answer

以下對toggle函數的綁定對我來說沒有任何意義：

:toggleLeft="toggle('left')"
:toggleRight="toggle('right')

由於函數不會傳回任何值，所以這是錯誤的。

這兩個綁定會導致函數無限呼叫toggle('left')和toggle('right')

只需在toggle函數中新增console.log(direction)以查看發生了什麼。

如果您想獲得關於正確解決方案的建議，請描述您想要實現的目標。

Vue.component('toggle-buttons',{
  props: {
    leftSelectedInitially: {
        type: Boolean,
        default: true,
    }
  },
  data() {
      return {
          leftSelected: true,
          rightSelected: false,
      }
  },
  beforeMount() {
      //this.leftSelected = this.leftSelectedInitially;
      //this.rightSelected = !this.leftSelectedInitially;
  },
  methods: {
      toggle(override) {
          console.log(`override: ${override}`)
          this.leftSelected = override == 'left';
          this.rightSelected = override == 'right';
      }
  },
  template: `

  
      
  
  
      
  

`
});

new Vue({
  el:'#app',
  methods: {
  toggle(direction) {
    console.log(`direction: ${direction}`)
    this.$refs.tb.toggle(direction);
    }
  }
})

#app { line-height: 2; }
[v-cloak] { display: none; }