Question

这是我的表格组件。

<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，我想知道为什么我的代码无法正常工作，无法进行任何操作。

谢谢

Answer 1

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

interface ComponentState {
  active: true;
  something: number;
  else: string;
}

class MyComponent extends React.Component<{}, ComponentState> {
  constructor(props) {
    super(props);

    this.state = { 
      active: false,
      something: 123,
      else: 'hello world',
    };
  }

  toggle(): void {
    this.setState((state: ComponentState): Pick<ComponentState, 'active'> ({
      active: !state.active,
    }));
  }

  render(): React.ReactElement {
    // ...
  }
}

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

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

1 个答案: