vue.js - Vue.js：如何从布局事件中调用页面方法？

Question

在我的设计中，页面布局有侧边栏，页面显示图像库在初始加载页面加载所有图像而没有过滤器单击侧边栏中的按钮时，页面应显示过滤后的图像。我可以在侧边栏的点击事件中从 API 服务器获得过滤响应，但无法调用页面的图像加载功能 如何在侧边栏的点击事件中调用页面的加载功能？先感谢您

标签： vue.jsevent-handlingvue-component

Answer 1

您可以使用事件总线。

EventBusLayout.js使用以下代码创建一个 js 文件（可以是）：

import Vue from 'vue';
export let EventBusLayout = new Vue();

然后在您的布局/侧边栏组件中：

<script>

import { EventBusLayout } from './EventBusLayout.js';

export default {

  methods: {
    sidebarClick() {
       EventBusLayout.$emit('sidebarclick');
    }
  }

}

</script>

在您的页面组件中：

<script>

import { EventBusLayout } from './EventBusLayout.js';

export default {

  beforeMount() {
    EventBusLayout.$on('sidebarclick',this.myCallbackFunction);
  },

  beforeDestroy() {
    EventBusLayout.$off('sidebarclick',this.myCallbackFunction);
  }

  methods: {
    myCallbackFunction() {
       /* do here your stuffs */
    }
  }

}

</script>