Vue.jsプロパティまたはメソッド「ハロー」がインスタンスで定義されたが、レンダリング

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

はい、プラグインで実行できます。
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 2

あなたは子コンポーネントから「ナビゲーション」のメソッドを呼び出したい場合は、あなたがthis.$parent.hello()でそれを行うことができますが、Vueのコンポーネントは（いけない）はありません両親のメソッドを呼び出します。コンポーネントはプロパティを宣言し、親はそれを提供するかどうかを指定できます。コンポーネントは、親がキャッチする可能性のあるイベントを発生させることができます。メソッドを直接呼び出すのは避けてください。

Answer 3

あなたはコンポーネント間のメソッドを再利用したい場合は、指定されたコンポーネントへのmixinメソッドをマージしますmixinを使用する必要があります。

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

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

はここJSFiddleです：https://jsfiddle.net/taxq569t/