如何使用 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 中 $emit 一个事件

    <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>

从第二个文件中我得到了调用我的函数 callAlert() 的事件 this.$on('some-event') 然后给定的函数被触发并显示警报。

<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()
}