vue父子组件传递参数

父组件代码展示如下：

<template>
  <div>
    <h2>parent父组件部分</h2>
    <child ref="child" :message="parentMsg" v-on:listenToChildEvent="showMsgFromChild"></child>
  </div>
</template>
 
<script>
  import child from './Child'
 
export default {
  data () {
    return {
      parentMsg:'hello'
    }
  },
  components : {
    child
  },
  methods:{
    showMsgFromChild:function (data) {
      console.log(data);
    }
  }
}
</script>
 
<style scoped>
 
</style>

子组件代码展示如下：

<template>
  <div>
    <h2>child子组件部分</h2>
    <p>{{message}}</p>
    <button v-on:click="sendMsgToParent">向父组件传值</button>
  </div>
</template>
 
<script>
export default {
  props : ["message"],
  data () {
    return {
 
    }
  },
  methods:{
    sendMsgToParent:function () {
      this.$emit("listenToChildEvent","传值内容")
    }
  }
}
</script>
 
<style scoped>
 

以上代码展示即可实现父子组件的数据传递。

有一种场景：

父组件需要在页面初始化时请求接口获取数据，此时父组件中引入了子组件，需向子组件传递数据，而此时父组件还并没有完成请求，因此传递给子组件的数据为空。

解决方法如下：

1、在子组件中使用watch监听：

watch: {
    // 以msg为例： 此时的msg为从父组件传递过来的array或object  等等
    msg (newVal, oldVal) {
        console.log(newVal)
        // 此时的newVal就是传递过来的完整数据 将newVal赋值给需要的变量即可
    }
}

2、通过ref属性，父组件调用子组件的方法，把要传的数组为参数传给子组件，子组件获取该参数，并使用

父组件：

this.$refs.child.aa(res.data.ms) 

//  此时的aa为子组件的方法

子组件：

aa (val) {
    this.message = val
}

两种方法都可实现。