时间戳

首页 > 解决方案 > 将数据从一个组件发送到另一个 Vuejs

javascript - 将数据从一个组件发送到另一个 Vuejs

问题描述

这是我的表格组件。 

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

同一组件上的方法：

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

父组件：

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

父方法：

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

我对 VueJS 真的很陌生，我偶然发现了 Emit 我想知道为什么我的代码不起作用，没有任何控制台。

谢谢

标签： javascriptvue.js

解决方案

我重新创建了您的问题，并且效果很好。

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>

推荐阅读