Как выполнить функцию из другого компонента, используя vuejs2

Question

У меня есть компонент, который должен обрабатывать событие, когда открывается моя боковая панель, и мне нужно вызывать эту функцию каждый раз, когда мне нужно открыть свою боковую панель.

Вот пример: я нажимаю на элемент, чтобы открыть его боковую панель, и mysiderbar вызывает функцию, которая вызывает функцию оповещения.

Но мой код выполняется из моей смонтированной функции vuejs

Вот мой первый файл, который будет вызывать мою боковую панель

<template>
    <div>
        <p>Just a template</p>
    </div>
</template>

<script>
export default {
  name: 'home',
  data: function() {
      return {
          status: 'critical'
      }
  },
    mounted() {

        var openSidebar = function() {
            document.getElementsByClassName('side-bar')[0].style.display = 'block';
        };
        document.getElementById('box').addEventListener('click', openSidebar);
    },

}
</script>
<style>

</style>

Вот мой второй файл

<template>
   <div>
     <app-server-status></app-server-status>
     <div id="box">
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique laborum repellat nihil maxime et veniam sed, sequi minima, quasi ipsum enim.</p>
     </div>
     <div class="side-bar">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro amet sed autem non qui dolor minima. Incidunt eos recusandae doloribus hic nesciunt nostrum suscipit dolorum velit, voluptatum, accusamus, ullam fugiat!</div>
   </div>
</template>

<script>
//import local component server status
import ServerStatus from './ServerStatus.vue';

export default {
  name: 'home',
  components: {
      'app-server-status': ServerStatus
  },
  methods: {
        callAlert() {
                alert('TESTE')
            }
        },
  created() {
  },
  mounted() {
    function callAlert() {
      alert('Test');
    }

  },
}
</script>
<style>
  #box {
    background: red;
    width: 200px;
    height: auto;
    float: left;
  }
  .side-bar {
    position: absolute;
    width: 250px;
    height: 400px;
    right: 0;
    display: none;
    background: blue;
  }

</style>

Я хочу вызвать функцию оповещения, когда открывается боковая панель?

Answer 1

Итак, я нашел решение своей проблемы и знаю, что, возможно, существует лучший способ сделать это, но он работает для меня. к сожалению, я не нашел никакого конкретного учебника для этого, но этот пример мне очень помог.

https://codepen.io/senta/pen/NpZVxg?editors=0010

В первом файле Server Status я $ отправляю событие в vuejs

    <template>
        <div>
            <p>Just a template</p>
            <div id="storage">ITs ME</div>
        </div> </template>

    <script> export default {   name: 'home',   methods: {
          //https://codepen.io/senta/pen/NpZVxg?editors=0010
          //chamar a função extena
          openSidebar: function () {
            var vm = this;
            document.getElementById('box').addEventListener('click', function () {
                vm.$parent.$emit('some-event');
                var elem = document.getElementsByClassName('side-bar')[0].style.display;

                if(elem === 'none' ) {
                    document.getElementsByClassName('side-bar')[0].style.display = 'block'
                } else {
                    document.getElementsByClassName('side-bar')[0].style.display = 'none'
                }
            });
          },   },
        mounted() {
            this.openSidebar();
        },  
} 
</script> 
<style>
        #storage {
            background: rebeccapurple;
            color: white;
            padding: 10px 10px;
            margin-bottom: 20px;
        } </style>

И из второго файла я получаю событие this.$ On('some-event'), которое вызывает мою функцию callAlert(), после чего данная функция срабатывает и показывает предупреждение.

<template>
   <div>
     <app-server-status></app-server-status>
     <div id="box">
       <p>IAM A TOOGLE</p>
     </div>
     <div class="side-bar" style="display: none;" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro amet sed autem non qui dolor minima. Incidunt eos recusandae doloribus hic nesciunt nostrum suscipit dolorum velit, voluptatum, accusamus, ullam fugiat!</div>
   </div>
</template>

<script>
//import local component server status
import ServerStatus from './ServerStatus.vue';

export default {
  name: 'home',
  components: {
      'app-server-status': ServerStatus
  },
  methods: {
        callAlert() {
          var elem = document.querySelector('.side-bar');
          var elemC = elem.style.display;
          if (elemC !== 'block') {
              alert('Opening');
            } else {
              alert('Close');
            }
          }
        },
     created: function () {
      this.$on('some-event', () => {
      this.callAlert();
    })
  },
  mounted() {
  }
}
</script>
<style>
  #box {
    background: red;
    width: 200px;
    height: auto;
    float: left;
  }
  .side-bar {
    position: absolute;
    width: 250px;
    height: 400px;
    right: 0;
    background: blue;
  }

</style>

Спасибо

Answer 2

Попробуйте зарегистрировать глобальную ссылку (возможно, не лучшую альтернативу) для вашей функции.

Ваш второй файл:

...
 methods: {
     callAlert: function() {
      alert('test');
     }
 }
 mounted () {
    this.$alert = this.callAlert
 }
...

В вашем первом файле:

mounted () {
    this.$alert()
}