从组件的根上调用方法，我的代码有什么问题？

Question

我有一个用于引导程序模态的组件。模态中有一个标记为“知道了”的按钮，我正在尝试调用在根实例上找到的方法。它不起作用-我无法说出我所缺少的东西。我添加了单击处理程序并发出了单击，但是无法触发清除功能？请告知错误之处-谢谢

 
 Vue.component('modal', {
    template: '#modal-template',
    props:{
        bgClass:{
            type:String,
            default:'default'
        },
       
    },
    methods: {
		clickHandler () {
      this.$emit('click');
    }
  
	}
  })
  
  new Vue({
      el: "#app",
      data: function data() {
      return{
      showModalZ:false
      }
      },
       
    methods: {
    
        clear: function(){
        alert("checkme");
        }
        }
       
   
  })

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<script type="text/x-template" id="modal-template">
    <transition name="modal">
      <div class="vm-modal-mask">
        <div class="vm-modal-wrapper">
          <div class="vm-modal-container">
  
            <div class="vm-modal-header">
              <slot name="header">
                default header
              </slot>
            </div>
  
            <div :class="bgClass" class="vm-modal-body">
              <slot name="body">
                default body
              </slot>
            </div>
  
            <div class="vm-modal-footer">
              <slot name="footer">
                &nbsp;
                <button class="modal-default-button btn btn-primary" @click="clickHandler(),clear()">
               Got It!
                </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>
  <div id="app">
<h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
               
                    <modal v-if="showModalZ" @close="showModalZ = false">
                            <h5 slot="header"><strong>input goes here</strong></h5> <hr>
                            <div>
                            test
                            </div>
                            
            
                        </modal>
                        </div>

Answer 1

您需要从模型组件clickHandler函数发出'close'事件，并使用@close在父级上捕获它

工作示例：

Vue.component('modal', {
  template: '#modal-template',
  props: {
    bgClass: {
      type: String,
      default: 'default'
    }
  },
  methods: {
    clickHandler() {
      this.$emit('close');
    }
  }
})

new Vue({
  el: "#app",
  data: function data() {
    return {
      showModalZ: false
    }
  },
  methods: {
    clear: function() {
      alert("checkme");
    }
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>

<script type="text/x-template" id="modal-template">
  <transition name="modal">
    <div class="vm-modal-mask">
      <div class="vm-modal-wrapper">
        <div class="vm-modal-container">

          <div class="vm-modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div :class="bgClass" class="vm-modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="vm-modal-footer">
            <slot name="footer">
              &nbsp;
              <button class="modal-default-button btn btn-primary" @click="clickHandler">
               Got It!
                </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>
<div id="app">
  <h5>hello <i style="font-size:20px;cursor:pointer;" aria-hidden="true" class="fa fa-info-circle" v-on:click="showModalZ=true"></i></h5>
  <modal v-if="showModalZ" @close="showModalZ = false">
    <h5 slot="header"><strong>input goes here</strong></h5>
    <hr>
    <div>test</div>
  </modal>
</div>