vue 组件传值

1.定义两个组件

Tutorialbutton.vue 子组件

GjTable.vue 父组件

2.Tutorialbutton.vue子组件内容:

<template>
  <div>
    <el-tabs type="border-card">
      <el-button size="mini" @click="getgjtype('c%23')"> c#</el-button>
    </el-tabs>
  </div>
</template>

<script>
import request from '@/network/request' //封装好的axios
export default {
  name: 'Tutorialbutton',
  data () {
    return {
      tableData: [] //接口获取的值
    }
  },


  methods: {
    getgjtype (gjtype) {
      request({ // 条件查询
        url: '/api/Gjtype/' + gjtype
      }).then(res => {
        this.tableData = res.data

  // tableData是在父组件on监听的方法
 // 第二个参数this.childValue是需要传的值
        this.$emit('tableData', this.tableData) 
      })
      // this.$http.get('/api/Gjtype/' + gjtype).then(res => {
      //   this.tableData = res.data
      // })
    }
  }
}
</script>

3.GjTable.vue父组件获取子组件值

//script引入子组件
import Tutorialbutton from './gjtable/Tutorialbutton'

//<template><!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<Tutorialbutton v-on:tableData="tableDatas"></Tutorialbutton>

name: 'GjTable',
  components: {
    Tutorialbutton
  },
 data () {
    return {
      tableData: []
    }
  },
 methods: {
tableDatas (name) {
      // childValue就是子组件传过来的值
      this.tableData = name
    }
}

vue 组件传值

推荐阅读