如何在vue2

Question

我正在尝试将事件从子组件发送到父组件，但我收到了以下错误

  

未捕获的TypeError：fns.apply不是函数       在VueComponent.invoker（http://searchapp.local/js/app.js:40036:18）       在VueComponent.Vue。$ emit（http://searchapp.local/js/app.js:40505:16）       在VueComponent.e。（匿名函数）[as $ emit]（chrome-extension：//nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js：1：6408）       在VueComponent.showModal（http://searchapp.local/js/app.js:14549:12）       在boundFn（http://searchapp.local/js/app.js:38463:14）       在HTMLButtonElement.invoker（http://searchapp.local/js/app.js:40036:18）invoker @ app.js：40036   Vue。$ emit @ app.js：40505 e。（匿名函数）@backend.js：1   showModal @ app.js：14549 boundFn @ app.js：38463 invoker @ app.js：40036

我的孩子组件是这样的

https://jsfiddle.net/95LqLr6o/

父组件就是这个

https://jsfiddle.net/9Lh05Ltp/

代码 Child Componenet

<template>
    <div class="col-md-3 col-sm-3 col-xs-3 pad">
                   <button class="btn btn-primary btn-sm pull-right view_btn1" data-cardpos="0" type="button" @click="showModal" ><i class="fa fa-eye"></i></button>
               </div>

</template>

<script >
      export default {
            props:['rates','card'],
            name:'card',
            data(){

                return {

                    // rates
                }
            },

            methods:{

                showModal(){

                    this.$emit('show_modal1');
                }

            }
      }
</script>

代码父组件

<template>
    <div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <card1 v-for="(card, index) in cardList" :key="index" :card="card" :rates="card.rates" v-if="index < 6 " v-on:show_modal1="showModal" >

            </card1>
            </card>
        </div>
    </div>
    <modal></modal>
    </div>
</template>


<script>

import createCardList from '../core/searchableCards';
import modal from '../components/modal.vue';
import card1 from '../components/Card-row-top.vue';

export default {
    components: {
        card1,card,modal
    },
    mounted() {
        console.log('Component mounted :: Results');
        console.log(this.$store.state.cards_search_query);
    },
    created(){


            this.form.submit('get',this.$store.state.cards_search_query)
            .then(data => {

                        toastr.success('Data loaded successfully');
                        this.dataList = data;
                        this.getCardList();
                })
            .catch(errors => console.log(errors));
    },
    data(){

        return {

             cardList:[],
             form: new Form({}),
             dataList:[],
             createCardList,
             rates:[],
             showModal:false

        };
    },

    methods : {
        showModal(){
            console.log('Modal opened');
            this.showModal = true;
            $('#getModal').modal('show');
        },

        getCardList()
         {
           var that = this;
           var urlForAjax = '/wfengine/promotions';
           console.log('getCardList');


           this.form.submit('get',urlForAjax)
                .then(res => {

                            toastr.success('Data loaded successfully');
                            this.cardList = createCardList(that.dataList,res);
                            console.log(this.cardList);

                    })
                .catch(errors => console.log(errors));
         }

    }
}
</script>

<style type="text/css">
.back_tbl {
    max-height: 109px !important;
    overflow: auto !important;
}
</style>