VueJSでの親子通信

Question

2つのVueコンポーネントがあります。 parent-component：

Vue.component('parent-component',{ 
     methods: { 
      test: function(){ 
      alert('Option Selected'); 
      } 
     }, 
     template: ` 
      <div><slot></slot></div> 
     ` 
}); 

そしてanimalsコンポーネント：

Vue.component('animals',{ 
     data: function(){ 
      return { 
       selected: '' 
      } 
     }, 
     template: ` 
      <select @change="selectionChanged" v-model="selected"> 
       <slot></slot> 
      </select> 
     `, 
     methods: { 
      selectionChanged: function(){ 
       this.$emit('optionselected', this.selected); 
      } 
     } 
}); 

そして、ここでは私のHTMLです：

<div id="app"> 
     <parent-component @optionselected="test()"> 
      <animals> 
       <option>Aardvark</option> 
       <option>Bear</option> 
       <option>Cat</option> 
      </animals> 
     </parent-component> 
</div> 

私が子コンポーネント（animals）から選択されたオプションを取得しようとしています親コンポーネント（parent-component）。私は子からoptionselectedイベントを出していますが、親コンポーネントがそのイベントに応答していないようです。つまり、test（）メソッドが全く呼び出されていないということです。私はここで間違って何をしていますか？ここで

はまずJSFiddle Demo

Answer 1

で、あなたのテンプレートでanimalsコンポーネントにリスナーを追加する必要があります。

<animals @optionselected="test"> 

第二に、それはあなたがスロットを使用しているため、スロット内の要素は、それらが定義されているコンポーネントのスコープで評価されようとしていることを覚えておくことが重要です。この場合、そのスコープはVueのスコープであり、parent-componentのスコープではありません。スロット内で定義された要素が含まれているコンポーネントのデータ、メソッドなどを使用できるようにするには、scoped slotを定義する必要があります。

<div><slot :test="test"></slot></div> 

をそして、あなたのVueのテンプレートはここ

<parent-component> 
    <template scope="{test}"> 
    <animals @optionselected="test"> 
     <option>Aardvark</option> 
     <option>Bear</option> 
     <option>Cat</option> 
    </animals> 
    </template> 
</parent-component> 

になった更新されたコードです：ケースということを、あなたの親コンポーネントは次のように見ていることになります。

console.clear() 
 
Vue.component('parent-component', { 
 
    methods: { 
 
    test: function(option) { 
 
     alert('Option Selected ' + option); 
 
    } 
 
    }, 
 
    template: ` 
 
      <div><slot :test="test"></slot></div> 
 
     ` 
 
}); 
 
Vue.component('animals', { 
 
    data: function() { 
 
    return { 
 
     selected: '' 
 
    } 
 
    }, 
 
    template: ` 
 
      <select @change="selectionChanged" v-model="selected"> 
 
       <slot></slot> 
 
      </select> 
 
     `, 
 
    methods: { 
 
    selectionChanged: function() { 
 
     this.$emit('optionselected', this.selected); 
 
    } 
 
    } 
 
}); 
 
new Vue({ 
 
    el: "#app", 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <parent-component> 
 
    <template scope="{test}"> 
 
     <animals @optionselected="test"> 
 
     <option>Aardvark</option> 
 
     <option>Bear</option> 
 
     <option>Cat</option> 
 
     </animals> 
 
    </template> 
 
    </parent-component> 
 
</div>