vue页面调用app.vue方法

如果您想在 Vue 页面中调用 App.vue 的方法，可以使用 Vue.js 的事件总线 EventBus。以下是具体步骤：

1. 在 App.vue 中，定义一个 EventBus 对象并导出它：

// App.vue

export const EventBus = new Vue();

2. 在 Vue 页面中，导入 App.vue 并引入 EventBus 对象：

// YourPage.vue

import { EventBus } from '@/App.vue';

3. 在 Vue 页面中，使用 EventBus.$emit() 方法触发事件，并在 App.vue 中使用 EventBus.$on() 方法监听事件并执行相应的方法：

// YourPage.vue

methods: {
  callAppMethod() {
    EventBus.$emit('call-app-method', arg1, arg2);
  }
}

// App.vue

mounted() {
  EventBus.$on('call-app-method', (arg1, arg2) => {
    // 执行相应的方法
  });
}

这样，当在 Vue 页面中调用 callAppMethod() 方法时，会触发 'call-app-method' 事件，然后在 App.vue 中监听到该事件并执行相应的方法。

相关问题

app.vue中调用header.vue和foot.vue两个组件

在app.vue中，可以通过以下代码调用header.vue和foot.vue两个组件：

<template>
  <div>
    <Header/>
    <router-view></router-view>
    <Foot/>
  </div>
</template>

<script>
import Header from './components/header.vue'
import Foot from './components/foot.vue'

export default {
  name: 'app',
  components: {
    Header,
    Foot
  }
}
</script>

在上面的代码中，我们通过import语句将header.vue和foot.vue组件引入到app.vue中，然后在components选项中进行注册。在template中，我们使用Header和Foot标签来调用这两个组件，并在router-view标签中渲染路由组件。

vue调用app.vue里面的方法

在Vue中，我们可以通过子组件来调用App.vue里的方法。首先，在App.vue组件中定义一个方法：

methods: {
  greet() {
    alert('Hello Vue!');
  }
}

接下来，在子组件中通过$parent指向父组件App.vue，并调用greet()方法：

this.$parent.greet();

另外，如果希望在子组件中调用App.vue里的方法，可以通过Vuex来实现。具体的做法是，在Vuex的store中定义一个actions，然后在App.vue的方法中dispatch该actions，最后在子组件中mapActions引入该actions：

// 在Vuex中定义actions
const actions = {
  greet({ commit }) {
    alert('Hello Vue!');
  }
}

// 在App.vue中dispatch actions
methods: {
  callGreet() {
    this.$store.dispatch('greet');
  }
}

// 在子组件中引入actions
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['greet'])
  },
  mounted() {
    this.greet();
  }
}

总之，无论是通过$parent还是通过Vuex，都可以很方便地在子组件中调用App.vue里的方法。