VueJS的親子溝通

Question

我有兩個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>