VueJSはVueJS外の関数に出力します

Question

私はVueJSコンポーネント内からコンポーネントを含むhtmlページにある関数に何かを送信しようとしています。私は何かを逃していますか？これは不可能ですか？コンポーネントを含むページで

insert: function(){ 
    this.$emit('insertItem', 123); 
} 

：方法としての私のコンポーネント内

<medialibrary @insertItem="insertItem(arg);"></medialibrary> 


<script> 
    function insertItem(arg){ 
     console.log('insertItem'); 
     console.log(arg); 
    } 
</script> 

Answer 1

これは、初見で思わよりも実際にはもっと可能です。関数がグローバル（特に親Vueで可視）の場合、VueのメソッドではなくてもVueによって呼び出すことができます。

あなたのコードの主な難点は、ケルブケースでなければならないラクダケーシングでした。あなたはinsertItemが$emitからargを取得したい場合は、HTMLだけで関数名を与える必要があり、そしてVueのは、引数を渡すの世話をする

：

<medialibrary id="app" @insert-item="insertItem"></medialibrary> 

私のスニペットは、あなたの元のコードを使用して、どの親Vueからargを提供します。

function insertItem(arg) { 
 
    console.log('insertItem'); 
 
    console.log(arg); 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    arg: 'hi there' 
 
    }, 
 
    components: { 
 
    medialibrary: { 
 
     template: '<div><button @click="insert">Insert</button></div>', 
 
     methods: { 
 
     insert() { 
 
      console.log("Emit"); 
 
      this.$emit('insert-item', 123); 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script> 
 
<medialibrary id="app" @insert-item="insertItem(arg);"></medialibrary>