Vue.js：发出后方法未在父组件中触发

Question

子组件在输入更改时发出带有有效载荷的事件：

Vue.component('gum-option', {
    inheritAttrs: false,
    props: ['label'],
    template: `
        <label class="gum-option">
            <input 
                type="radio"
                v-bind="$attrs"
                v-on:change="$emit('update', this.label)">
            <span>{{ label }}</span>
        </label>
    `
});

它的父组件侦听此事件以触发引发警报的方法：

Vue.component('gum-select', {
    template: `
        <div v-on:update="updateValue"> 
            <label>{{label}}</label>
            <div class="selected">
                {{selectedOption}}
            </div>
            <slot v-bind="options"></slot>
        </div>
    `,
    data: function () {
        return {
            selectedOption: ''
        }
    },
    props:['options', 'name', 'label'],
    methods: {
        updateValue: function(event) { // method invoked by the "update" event
            alert(event); // Not firing ! Why
        }
    }
});

您可以在这支笔上找到错误： https://codepen.io/bourpie/pen/JjXdjzg?editors=1011

Answer 1

监听器应该放在App中的gum-option组件上，方法updateValue也是如此。还有其他一些错误，所以这是固定的演示：

<div id="myApp">
  <gum-select name="options" label="Options" v-bind:options="options" >
    <gum-option 
          v-for="option in options" 
          v-bind:key="option.value" 
          v-bind:value="option.value" 
          v-bind:label="option.texte" 
          name="province"
          v-on:update="updateValue">
    </gum-option>
  </gum-select>
</div>

Vue.component('gum-option', {
    inheritAttrs: false,
    props: ['label'],
    template: `
        <label class="gum-option">
            <input 
                type="radio"
                v-bind="$attrs"
                v-on:change="$emit('update', label)">
            <span>{{ label }}</span>
        </label>
    `
});

Vue.component('gum-select', {
    template: `
        <div> 
            <label>{{label}}</label>
            <div class="selected">
                {{selectedOption}}
            </div>
            <slot v-bind="options"></slot>
        </div>
    `,
    data: function () {
        return {
            selectedOption: ''
        }
    },
    props:['options', 'name', 'label'],
});

new Vue({
    el: '#myApp',
    data: { 
        options: [
            {value: '1', texte: 'Option 1'},
            {value: '2', texte: 'Option 2'},
            {value: '3', texte: 'Option 3'}
        ]
    },
  methods: {
        updateValue: function(label) { 
            console.log(label);
        }
    }
});

Vue.js：发出后方法未在父组件中触发

Vue.js : Method not firing in parent component after emit

javascript

vue.js

events

components

emit