vue.js将组件中的事件总线捕获到另一个组件

时间:2017-11-23 03:25:56

标签: vue.js emit

我有2个vue.js组件,如componentA,componentB

我想将componentB放在componentA中,我希望将自定义事件从componentB发送到componentA。 但是我在componentB上调用了这个。$ emit(' updateStartTimeEvent')但是componentA没有捕获这个事件,我该怎么办。 我的源代码示例如下所示:

componentA.vue

<template>
    <div id="app">
        <componentB  v:on:updateStartTimeEvent="updateStartTime"   dateRangeSelector="dateRangeSelector" startTime="start_time" endTime="start_time"  ></componentB>
    </div>
</template>
<script>
    import componentB from '../componentB.vue';
    export default {
         components: {
           componentB
        },
        data () {
            return {
                dateRangeSelector: 'one',
                start_time: '',
                end_time: '',
            }
        },
        methods: {
            updateStartTime: function(startTime) {
                console.log(startTime);
            },
        }
    }
</script>

和CompoentB.vue赞:

<template>
    <div id="CompoentB">
        <input type="button" @click="toggleDateRang('me')">
    </div>
</template>
<script>
    export default {
        props: ['dateRangeSelector', 'startTime' , 'endTime'],
        methods: {
            toggleDateRang: function(which) {
                this.$emit('updateDateRangeSelectorEvent', which);
            },
        }
    }
</script>

0 个答案:

没有答案