1、使用this.$parent方法

1.1 父组件

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-input v-model="username"></el-input>
    </el-col>
    <el-col :span="2">
      <Cdata></Cdata>
    </el-col>
  </el-row>
</template>

<script>
  import Cdata from './Cdata'

  export default {
    components:{
      Cdata
    },
    data() {
      return {
        username: ''
      }
    },
    methods:{
      buildData() {
        return this.username
      }
    }
  }
</script>

<style>
</style>

1.2 子组件

<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-button type="primary" @click="queryData">查询</el-button>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods:{
            queryData() {
                var data = this.$parent.buildData()
        console.log(data)
            }
        }
    }
</script>

<style>
</style>

1.3 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Pdata from '@/components/parentchild/Pdata'

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Pdata',
      component: Pdata
    }
  ]
})

1.4 实现结果

vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: this.$parent.buildData is not a function"

found in

---> <ElButton> at packages/button/src/button.vue
       <ElCol>
         <ElRow>
           <Cdata> at src/components/parentchild/Cdata.vue
             <ElCol>
               <ElRow>
                 <Pdata> at src/components/parentchild/Pdata.vue
                   <App> at src/App.vue
                     <Root>
warn @ vue.esm.js?efeb:628
logError @ vue.esm.js?efeb:1893
globalHandleError @ vue.esm.js?efeb:1888
handleError @ vue.esm.js?efeb:1848
invokeWithErrorHandling @ vue.esm.js?efeb:1871
invoker @ vue.esm.js?efeb:2188
invokeWithErrorHandling @ vue.esm.js?efeb:1863
Vue.$emit @ vue.esm.js?efeb:3891
handleClick @ element-ui.common.js?ccbf:9393
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7559
vue.esm.js?efeb:1897 TypeError: this.$parent.buildData is not a function
    at VueComponent.queryData (Cdata.vue?ae9c:18)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at VueComponent.invoker (vue.esm.js?efeb:2188)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:3891)
    at VueComponent.handleClick (element-ui.common.js?ccbf:9393)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at HTMLButtonElement.invoker (vue.esm.js?efeb:2188)
    at HTMLButtonElement.original._wrapper (vue.esm.js?efeb:7559)

1.5 效果图

子组件调用父组件方法

2、使用$emit

2.1 父组件

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-input v-model="username"></el-input>
    </el-col>
    <el-col :span="2">
      <Cdata @buildData="buildData"></Cdata>
    </el-col>
  </el-row>
</template>

<script>
  import Cdata from './Cdata'

  export default {
    components:{
      Cdata
    },
    data() {
      return {
        username: ''
      }
    },
    methods:{
      buildData() {
        return this.username
      }
    }
  }
</script>

<style>
</style>

2.2 子组件

<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-button type="primary" @click="queryData">查询</el-button>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods:{
            queryData() {
                var username = this.$emit('buildData')
                             console.log(username)
            }
        }
    }
</script>

<style>
</style>

2.3 实现结果

子组件调用父组件方法

3、将方法传入子组件中

3.1 父组件

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-input v-model="username"></el-input>
    </el-col>
    <el-col :span="2">
      <Cdata :buildData="buildData"></Cdata>
    </el-col>
  </el-row>
</template>

<script>
  import Cdata from './Cdata'

  export default {
    components:{
      Cdata
    },
    data() {
      return {
        username: ''
      }
    },
    methods:{
      buildData() {
        return this.username
      }
    }
  }
</script>

<style>
</style>

3.2 子组件

<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-button type="primary" @click="queryData">查询</el-button>
        </el-col>
    </el-row>
</template>

<script>
    export default {
    props:{
      buildData: {
        type: Function,
        default: null
      }
    },
        data() {
            return {

            }
        },
        methods:{
            queryData() {
                var username = this.buildData()
        console.log(username)
            }
        }
    }
</script>

<style>
</style>

3.3 实现结果

子组件调用父组件方法

4、说明

第一种方法直接出现报错，说明行不通；第二种方法使用$emit（触发当前实例上的事件）；第三种方法使用props（props 可以是数组或对象，用于接收来自父组件的数据）。三种方法各有不同，根据实际情况来选择。