вызов метода в корне из компонента, что не так с моим кодом?

Question

У меня есть компонент для моей начальной загрузки. На модале есть кнопка с надписью «Got It», которую я пытаюсь вызвать методом, найденным в корневом экземпляре. Это не работает - я не могу сказать, что мне не хватает. Я добавил обработчик щелчка и испустил щелчок, но не могу вызвать функцию очистки? Посоветуйте пожалуйста что не так - спасибо

 
 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

просто используйте это. $ Parent. $ Root.methodname () например, this. $ Parent. $ Root.clear ();

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

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()">
                            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 2

Вам необходимо сгенерировать событие 'close' из компонента модели clickHandler и захватить его на родительском элементе с помощью @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>