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

Question

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

Answer 1

您可以使用事件总线。

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

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

然后在您的 layout/sidebar 组件中：

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

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

Vue.js : How to call a method of page from layout event?

event-handling

vue.js

vue-component