将数据从一个组件传递到另一个Vuejs

Question

this is my Table component.

<b-table
    class="table table-striped"
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      :fields="fields"
      @row-clicked="test"
      lg
    ></b-table>

method on the same component:

methods: {
    test(){
        console.log('test')
        this.$emit('rowClick',"heyoooooooo")
    }
},

parent component:

    <ClientTable :fields="fields" :items="rows" :sortBy="sortBy" :sortDesc="sortDesc" @rowClicked="Callme()"/>

parent method:

methods: {
    Callme(e){
        console.log('hee')
    }
},

I'm really new with VueJS and I stumbled with Emit I was wondering why is my code not working, does not console anything.

thanks

Answer 1

I recreate your question and it's works well.

 Vue.config.devtools = false Vue.config.productionTip = false Vue.component('client-table', { props: ['items'], methods: { test(){ this.$emit('row-clicked',"heyoooooooo") } }, template: ` <b-table class="table table-striped" :items="items" lg @row-clicked="test" ></b-table> ` }) new Vue({ el: "#app", data: { rows: [ { 'heading 1': 'table cell', 'heading 2': 'table cell', 'heading 3': 'table cell' }, { 'heading 1': 'table cell', 'heading 2': 'table cell', 'heading 3': 'table cell' }, { 'heading 1': 'table cell', 'heading 2': 'table cell', 'heading 3': 'table cell' }, ] }, methods: { Callme (e) { console.log(e) } } }) 

 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /> <div id="app"> <client-table :items="rows" @row-clicked="Callme"> </client-table> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.28/dist/bootstrap-vue.js"></script>