Question

我有一个组件，试图从根调用方法。我尝试从那里发出信号，但是请记住，HTML中没有按钮可以触发此操作。如何在没有按钮的情况下发出该方法-将侦听器放置在何处？我想在项目中使用此概念来更新分数。请提供建议。

Vue.component('item-edit', {
  template: '#item-edit',
  props: {
    item: Object,
  },
  data() {
    return {
      inEdit: false,
    }
  },
  methods:{
   toggle(){
     this.inEdit = !this.inEdit;
   },
   increment() {
   this.$emit(increment)
   }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      name: 'test-1'
    }, {
      id: 2,
      name: 'test-2'
    }, {
      id: 3,
      name: 'test-3'
    }, ],
  },
  methods:{
  increment(){
  score+=1
  }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
Score: {{score}}
  <template id="item-edit">
    <li>
      <span v-show="!inEdit">{{item.name}}</span>
      <input v-show="inEdit" type="text" v-model="item.name" />
      <a href="#" @click.prevent="toggle();">{{inEdit ? 'save' : 'edit'}}</a>
    </li>
  </template>
  <ul>
    <item-edit v-for="item in items" :item="item"></item-edit>
  </ul>

</div>

Answer 1

您将需要使用on收听事件：

<item-edit v-for="item in items" :item="item" v-on:increment="increment">
</item-edit>

现在，v-on:increment将调用该组件的方法increment。

increment() {
  score += 1
}

那么，现在如何告诉子组件发出事件？

好吧，您只需从所需的方法发出事件即可。

methodToEmit() {
  this.$emit('increment')
}

您的问题，我将如何在没有按钮的情况下调用methodToEmit？

您可以在套用切换方法后立即调用它：

toggle() {
  // do other stuff
  this.methodToEmit()
}

或者，您可以绑定一个隐藏的输入元素并绑定该方法以在挂接的钩子中调用methodToEmit方法。

vuejs从组件到根发出方法

1 个答案: