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">

其次，重要的是要记住，因为您使用的是 slots，所以 slot 内的元素将在定义它们的组件范围内进行评估。在这种情况下，该范围是 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>