2017-12-01 11 views
0

時に参照されていない私は、VUEの成分としてのナビゲーションを持っている:Vue.jsプロパティまたはメソッド「ハロー」がインスタンスで定義されたが、レンダリング

<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の中に別のコンポーネントがあると、その関数も機能します。達成できますか、それともコンポーネント自体の中になければなりませんか?

+0

参照します。https:// vuejs。 org/v2/guide/components.html#カスタムイベント – str

答えて

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/[email protected]/dist/vue.js"></script> 
 
<div class="app"></div>

+0

他の人が簡単に見つけることができるように私に/私たちに例を与えることができます – Przemek

+0

コードをチェックしてください – Bsalex

+0

@Bsalex OPが絶対的な必要がない場合、それのための? – samayo

0

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

+0

この場合、ナビゲーションは子供ですか? \t

Przemek

+0

「ナビゲーション」をコンポーネントとして登録しているので、ルートVueの子または別のコンポーネントになります。しかし、それは自分の子供を持つことができます、そして、それは私があなたが求めていたものです。 – bbsimonbb

+0

私はdivを持つことを計画しており、その中にすべてのコンポーネントをナビゲートしますここでは1つしかありませんが、その間に切り替えるためにデータパラメータを使用して機能を切り替えます。 – Przemek

4

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

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

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

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

+0

この質問はより多くの文脈から恩恵を受けるが、これが最良の方向である。 –

+0

ページ上に2つのvueアプリケーションがある場合、このアプローチはまだ適切でしょうか?すなわちナビとコンテンツ。私は、navで利用可能なこの機能は、ユーザがクリックする場所に応じて異なるコンポーネント(異なるnav)を切り替えるために必要です。 – Przemek

+0

はい、単にMixinオブジェクトを任意のVueインスタンスまたはコンポーネントにマージします。メソッドを子孫に渡したい場合は、[provide/inject](https://vuejs.org/v2/api/#provide-inject)を使用することもできますが、この機能は実際にコンポーネントパブリッシャ向けですが、ここであなたがそれを行う方法は次のとおりです:https://jsfiddle.net/u33bwejj/ –

関連する問題