Vue.js 如何从vue组件中调用App.vue中的方法

在本文中，我们将介绍如何从Vue组件中调用App.vue中的方法。在Vue.js中，我们可以通过使用事件总线、props和vuex等多种方法来实现组件间的通信。通过这些方法，我们可以将App.vue中的方法暴露给其他组件，并在其他组件中调用这些方法。

阅读更多：Vue.js 教程

使用事件总线

事件总线是Vue.js中一种用于组件间通信的机制。通过事件总线，我们可以在不直接引用其他组件的情况下，在Vue组件中调用App.vue中的方法。

首先，我们需要在App.vue中创建一个Vue实例作为事件总线：

<script>
    import Vue from 'vue'

    export const EventBus = new Vue()
</script>

然后，在App.vue的方法中，我们可以触发一个自定义事件，并传递需要的参数：

<template>
    <div>
        <button @click="callAppMethod('Hello from Component')">Call App Method</button>
    </div>
</template>

<script>
    import { EventBus } from './App.vue'

    export default {
        methods: {
            callAppMethod(message) {
                EventBus.$emit('appMethodCalled', message)
            }
        }
    }
</script>

在其他的Vue组件中，我们可以使用$on方法监听并调用App.vue中触发的事件：

<template>
    <div>
        <p>{{ appMessage }}</p>
    </div>
</template>

<script>
    import { EventBus } from './App.vue'

    export default {
        data() {
            return {
                appMessage: ''
            }
        },
        mounted() {
            EventBus.$on('appMethodCalled', (message) => {
                this.appMessage = message
            })
        }
    }
</script>

通过事件总线，我们可以在Vue组件中调用App.vue中的方法，并实现组件之间的通信。

使用props

另一种从Vue组件中调用App.vue中的方法的方法是通过props属性。props是一种用于父组件向子组件传递数据的机制。通过将App.vue中的方法作为props属性传递给子组件，我们可以在子组件中调用这些方法。

首先，在App.vue中，将需要暴露给子组件的方法作为props属性传递给子组件：

<template>
    <div>
        <child-component :appMethod="callAppMethod"></child-component>
    </div>
</template>

<script>
    export default {
        methods: {
            callAppMethod(message) {
                console.log(message)
            }
        }
    }
</script>

在子组件中，我们可以通过使用this.$props对象来访问App.vue中传递的方法，并在需要的地方调用这些方法：

<template>
    <div>
        <button @click="callAppMethod('Hello from Child Component')">Call App Method</button>
    </div>
</template>

<script>
    export default {
        methods: {
            callAppMethod(message) {
                this.$props.appMethod(message)
            }
        }
    }
</script>

通过props属性，我们可以将App.vue中的方法传递给子组件，并在子组件中调用这些方法。

使用vuex

vuex是一个专门为Vue.js设计的状态管理模式。通过使用vuex，我们可以在整个应用程序中共享和管理状态，并可以在任何Vue组件中调用App.vue中的方法。

首先，我们需要安装vuex并创建一个store对象作为状态管理器：

npm install vuex --save

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        message: ''
    },
    mutations: {
        setMessage(state, message) {
            state.message = message
        }
    },
    actions: {
        callAppMethod({ commit }, message) {
            commit('setMessage', message)
        }
    }
})

然后，在App.vue中，我们可以通过在方法中调用store的action来触发mutation，并更新状态：

<script>
    import { mapActions } from 'vuex'

    export default {
        methods: {
            ...mapActions(['callAppMethod'])
        },
        mounted() {
            this.callAppMethod('Hello from App.vue')
        }
    }
</script>

在其他Vue组件中，我们可以通过使用mapState和mapActions来访问store中的状态和方法，并在需要的地方调用这些方法：

<template>
    <div>
        <p>{{ message }}</p>
        <button @click="callAppMethod('Hello from Component')">Call App Method</button>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
        computed: {
            ...mapState(['message'])
        },
        methods: {
            ...mapActions(['callAppMethod'])
        }
    }
</script>

通过使用vuex，我们可以在任何Vue组件中调用App.vue中的方法，并管理应用程序的状态。