Question

假设我有一个模态对话作为Vue组件。有时我想要OK和取消。有时，我只是想要好。我能想到的最干净的方法是让我的组件只在其来电者正在收听取消事件时才显示取消。可以这样做吗？

标记

<div id="vue-root">
  <confirm-modal v-on:ok="handleOk"></confirm-modal>
  <confirm-modal v-on:ok="handleOk" v-on:cancel="handleCancel"></confirm-modal>
</div>

码

Vue.component('confirm-modal',{
    template : `
    <div class="confirm-modal">
        Are you sure<br>
      <button v-on:click="$emit('ok',{})">OK</button>
      <button v-if="'HOW DO I TEST IF CANCEL WILL BE CAPTURED???'" v-on:click="$emit('cancel',{})">Cancel</button
    </div>
  `,
})
vm = new Vue({
    el : '#vue-root',
  methods : {
    handleOk : function(){
        alert('OK already');
    },
    handleCancel : function(){

    }
  }
})

Answer 1

执行此操作的简便方法是，当您要显示确定和取消按钮时，可以将道具从父组件传递到子组件。在这里你有更多关于道具的信息 https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

Answer 2

首先，您可以发出没有值的事件，而父级将捕获它。你不需要这个空对象。

我从你的问题中理解的是：

如果单击取消按钮，是否要跟踪确认模式组件？

然后这样做。

Vue.component('confirm-modal',{
    template : `
    <div class="confirm-modal">
        Are you sure<br>
      <button v-on:click="$emit('ok',{})">OK</button>
      <button v-if="isCaptured" v-on:click="cancelClick">Cancel</button
    </div>
  `,
    data: function () {
      return {
          isCaptured: false,
       }; 
    },

    methods: {
       cancelClick: function() {
              this.isCaptured = true;
              // or this.$emit('cancel'); then pass prop from parent
         },
     }
})
vm = new Vue({
    el : '#vue-root',
  methods : {
    handleOk : function(){
        alert('OK already');
    },
    handleCancel : function(){

    }
  }
})

vue组件可以知道监听器是否在监听吗？

2 个答案: