Question

假设我有一个名为Modal的组件，我希望在我的应用程序中重用它，同时我也想动态地将函数绑定到它的Yes按钮，我怎样才能将函数传递给我@click中Yes按钮的Modal事件作为道具。例如：

//data tags are used for fast markup here only
<tamplate>
    <div>
        <div :id="`${id}`" data-modal>
           <div data-modal-title>
               {{title}}
           </div>
           <div data-modal-body>
               {{body}}
           </div>
           <div data-modal-footer>
               <button @click="//event to be passed//" data-modal-button-ok>Yes</button>
               <button data-modal-button-cancel>Yes</button>
           </div>
       </div>
   </div>
</template>

<script>
   export default {
       name: 'modal',
       props: [
          'id',
          'title',
          'body',
           // event?
       ]
   }
</script>

当使用这个模态时，该如何传递事件？

<Modal id="x" title="y" body="x" //event="????"//></Modal>

Answer 1

您应该在模式中$emit一个事件（名称，例如，yes）：

<button @click="$emit('yes')" data-modal-button-ok>Yes</button>

或者，使用方法：

<button @click="handleYesClick" data-modal-button-ok>Yes</button>

methods: {
  handleYesClick() {
    this.$emit('yes');
  }
}

使用以下方式在父母身上听取：

<modal ... v-on:yes="someCodeToExecute"></modal>

或（简写）：

<modal ... @yes="someCodeToExecute"></modal>

演示：

＆＃13;

Vue.component('modal',  {
  template: "#modal",
  name: 'modal',
  props: ['id', 'title', 'body']
})
new Vue({
  el: '#app',
  data: {},
  methods: {
    methodAtParentYes() {
      alert('methodAtParentYes!');
    },
    methodAtParentCancel() {
      alert('methodAtParentCancel!');
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<template id="modal">
    <div>
        <div :id="`${id}`" data-modal>
           <div data-modal-title>
               {{title}}
           </div>
           <div data-modal-body>
               {{body}}
           </div>
           <div data-modal-footer>
               <button @click="$emit('yes')" data-modal-button-ok>Yes</button>
               <button @click="$emit('cancel')" data-modal-button-cancel>Cancel</button>
           </div>
       </div>
   </div>
</template>

<div id="app">
  <modal id="1" title="My Title" body="Body" @yes="methodAtParentYes" @cancel="methodAtParentCancel"></modal>
</div>

＆＃13;

Answer 2

有两种方法可以做到这一点。

第一种方法是你可以将方法作为道具传递，就像你传递任何其他内容一样，然后在Modal组件中只需在点击处理程序中调用该道具。

<强> Parent.vue

<template>
   <Modal id="x" title="y" body="x" :handleYes="handleYes"></Modal>
</template>
<script>
  methods: {
    handleYes () {
      // do something
    }
  }
</script>

<强> Modal.vue

<button @click="handleYes()">Yes</button>

另一种方法是使用$emit。因此，在Modal.vue中，您将定义一个发出事件的方法，然后在父级中侦听该事件并在那里调用该方法。

<强> Modal.vue

<template>
  <button @click="emitEvent">Yes</button> 
</template>
<script>
  methods: {
    emitEvent () {
      this.$emit('userClickedYes')
    }
  }
</script>

<强> Parent.vue

<template>
   <Modal id="x" title="y" body="x" @userClickedYes="handleYes"></Modal>
</template>
<script>
  methods: {
    handleYes () {
      // do something
    }
  }
</script>

将函数作为道具传递给子组件

2 个答案: