vue父组件调用子组件方法（运用）

父组件

<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div class="mc-top">
        <water-level-chart :newData="data" ref="wlc"/>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import waterLevelChart from './waterLevelChart'

export default {
  name: 'DataView',
  components: {
    waterLevelChart
  },
  data () {
    return {
      data: []
    }
  },
  methods: {
    get () {
      this.$http({ method: 'get', url: '/test/test' }).then(
        (resp) => {
          this.data = resp.data
          this.$refs.wlc.get(resp.data)
        }, (error) => {
          console.log('error=' + JSON.stringify(error))
        }).catch((exception) => {
      })
    }
  }
}
</script>

　　子组件

<template>
  <div id="water-level-chart">
    <div class="water-level-chart-title">FPY Summary {{newData.fpy}}%</div>
    <div class="chart-container">
      <dv-water-level-pond :config="config"/>
    </div>
  </div>
</template>

<script>
export default {
  props: ['newData'],
  data () {
    return {
      config: {
        data: [0],
        shape: 'round',
        waveHeight: 25,
        colors: ['rgb(133,165,255)'],
        waveNum: 2
      }
    }
  },
  methods: {
    get (newData) {
      const newConfig = {
        data: [newData.fpy],
        shape: 'round',
        waveHeight: 25,
        colors: ['rgb(133,165,255)'],
        waveNum: 2
      }
      this.config = newConfig
    }
  }
}
</script>

<style lang="less">

</style>

1、在子组件中：<div></div>是必须要存在的 

2、在父组件中：首先要引入子组件 import waterLevelChart from './waterLevelChart';

3、 <water-level-chart ref="wlc"></water-level-chart>是在父组件中为子组件添加一个占位，ref="wlc"是子组件在父组件中的名字

 4、父组件中 components: {　　是声明子组件在父组件中的名字

 5、在父组件的方法中调用子组件的方法，很重要   this.$refs.wlc.get("可传入值子组件接收");