親からフィルタを呼び出す方法を確認する

Question

単一ファイルコンポーネントを使用してparentのフィルタを呼び出す方法を教えてください。以下は私のコードです。

app.js

import computed from '../vue/mixins/computed.js'; 
import filters from '../vue/mixins/filters.js'; 
import methods from '../vue/mixins/methods.js'; 

const app = new Vue({ 
    el: '#app', 
    mixins:[ 
     computed, 
     filters, 
     methods 
    ], 
    mounted: function() { 

    } 
}); 

home.vue

<template> 
    <div class="home-content"> 
     <h3>{{home | uppercase}}</h3> 
    </div> 
</template> 
<script type="text/javascript"> 
    export default { 
     data: function() { 
      return { 
       home: 'home' 
      } 
     }, 
     mounted: function() { 
      this.$parent.$options.methods.makeConsole(); 
     } 
    } 
</script> 

それは私のコンソールでこの警告を与えているが、 "フィルタを解決するために失敗しました：大文字の"

Answer 1

なしありポイント。あなたのミックスインも子供の中に入れてください。コンポーネントは、理想的には自律的、そして、それは、少なくともではないものの上または同じレベルで（コンポーネントの階層にある場合を認識していないする必要があります。

は

Answer 2

• あなただけのフィルタは、グローバル利用可能にする必要があります開始する前に大文字は、フィルタを使用するための最もシンプルで信頼性の高い方法だろう

  function uppercase(str) 
      return str.uppercase(); 
  } 
  

  のような単純な関数とすることができる

  Vue.filter('uppercase', uppercase); 
  

  とルート・インスタンスすべてのvueコンポーネントに適用されます。

• あなたのフィルタをミックスイン経由で親にインポートすると、なぜそのミックスインを子供に使用しないのですか？

• this.$parentメソッドを使用しないでください。これは、子コンポーネントがその親の静的依存に依存するためです。

  • あなたが子供でフィルタとして親からフィルタ機能を宣言する必要があるかもしれません$parentアプローチを使用するには：

    フィルター：{ 大文字：。。この$親$ options.filtersを。大文字 }の