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