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

Posted 2023-02-23

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

【英文标题】：Vue.js Property or method "hello" is not defined on the instance but referenced during render

【发布时间】：2018-05-15 15:23:47

【问题描述】：

我在 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 中有另一个组件，该功能也可以工作。这可以实现还是必须在组件本身内？

【问题讨论】：

见vuejs.org/v2/guide/components.html#Custom-Events

【参考方案1】：

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

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


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

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

【讨论】：

这个问题将受益于更多的上下文，但这是最好的方向。

如果页面上有 2 个 vue 应用程序，这种方法是否仍然适用？即导航和内容。我只需要导航上可用的此功能，因为它会根据用户点击的位置在不同的组件（不同的导航）之间切换

是的，它只是将 Mixin 对象合并到任何 Vue 实例或组件中。如果您想将该方法传递给后代，您也可以使用provide / inject，虽然此功能实际上是为组件发布者设计的，但您可以这样做：jsfiddle.net/u33bwejj

谢谢你，它确实解释了很多。道具呢？

provide/inject 和通过 props 传递函数的区别在于，通过 props 传递的函数总是在父上下文中执行：jsfiddle.net/043gzhtq。当注入的函数在它被注入的组件的上下文中执行时：jsfiddle.net/euLmtv1v。但是，通过 props 传递函数并不是代码重用的标准方法。如果您正在考虑这些选项，那么可能值得一看 this Github issue，这解释了为什么 provide/inject 诞生了。

【参考方案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>

【讨论】：

请您给我/我们提供示例，以便其他人可以轻松找到它

@Bsalex 为什么在没有绝对需要的情况下 OP 会求助于创建插件？

@samayo，我无法读懂 OP 的想法。您是否清楚为什么 OP 需要 hello 方法？我不清楚。但是 vue 框架非常灵活，完全可以用它来做这样的事情，这里我将展示如何做到这一点。

【参考方案3】：

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

【讨论】：

那么在这种情况下导航是一个孩子？

好吧，您将“导航”注册为组件，因此它将是根 Vue 或其他组件的子组件。但它可以有自己的孩子，这就是我想你问的。

我打算有 div 和里面所有的导航组件 这里只有一个，功能将在它们之间切换通过使用 data 参数在它们之间切换，如果有意义的话