methods传值到data

app.vue

<template>
  <div id="main">
    <router-view 
        :test_value="this.test_value"
        :transfer="transfer"
        :get_value="this.get_value"
        ></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App',
    data() {
      return {
        test_value: '12345679',
        get_value: 'test'
      }
    },
    methods: {
      getData(){
        axios.get("api/test/").then(
          response => {
            console.log("request test api data:", response.data)
            this.get_value=response.data
            // return response.data
          },
          error => {
            console.log("数据请求错误", error.message)
          }
        )
      },
      transfer() {
        this.getData();
      },

子组件：test.vue

<template>
    <div>{{test_value}} -- {{get_value}}
        <button @click="transfer">xxxx</button>
        <p>{{ get_value }}</p>
    </div>
    

</template>>


<script>

export default {
    props: ['test_value', 'transfer', 'get_value'],
    name: 'test',
    data() {
        return {
            // get_value: ''
        }
    },

}
</script>

我们将getData方法的返回值赋值给了get_value属性。当按钮被点击时，将调用transform方法，该方法会将getData方法的返回值赋给get_value属性，从而更新模板中的结果。

 参考文档：https://blog.51cto.com/u_16175435/6658926