Vue.js 属性或方法“hello”未在实例上定义，但在渲染期间被引用

Question

我在 vue 中有一个导航作为组件：

<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
        <a class="navbar-brand" href="">Website Builder</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="/#/create">Create</a>
                </li>
                <li class="nav-item">
                    <a v-on:click="hello" class="nav-link" href="/#/how">How</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#/youtube">Videos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/#/login">Go to main site</a>
                </li>
            </ul>
    </div>
</nav>
</template>

<script>

export default {
    data() {
        return {

        }
    },
    methods: //if I have hello function here it works
}

</script>

我的 vue 设置如下所示：

import Navigation from '../components/homeNavigation.vue';


Vue.component('navigation', Navigation);



new Vue({
    el: '#nav',
    methods:
        hello: function () {
            console.log('hi');
        } // I want it here so that it is available for all components within '#nav'
});

所以基本上我想在新的 Vue 中定义它，这样它就可以在所有组件中使用，即如果我在 #nav 中有另一个组件，该功能也可以工作。这可以实现还是必须在组件本身内？

Answer 1

如果你想跨组件重用方法，你应该使用mixin，它将混合方法合并到给定的组件中：

const HelloMixin = {
  methods: {
    hello() {
      console.log('hi');
    }
  }
}

new Vue({
  el: '#app',
  mixins: [HelloMixin],
  created() {
    this.hello();
  },
})

这是 JSFiddle：https://jsfiddle.net/taxq569t/

Answer 2

是的，您可以使用插件来实现。
https://vuejs.org/v2/guide/plugins.html

Vue.component('someComponent', {
  template: `
        <span>
            Example text <br/>
            {{globalMethod()}}
        </span>
  `
});


const MyPlugin = {
  install(Vue) {
    Vue.prototype.globalMethod = function () {
      return 'Global method result';
    }
  }
};

Vue.use(MyPlugin);

var instance = new Vue({
  el: '.app',
  template: '<someComponent />'
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div class="app"></div>

Answer 3

如果你想从子组件调用“导航”的方法，你可以使用this.$parent.hello()，但是 Vue 组件不（不应该）调用父组件的方法。组件声明它们的属性，父母可以提供也可以不提供。组件可以发出事件，父母可以捕捉或不捕捉。您应该避免直接调用方法。