关于VUE组件父子传值问题，通俗易懂

关于VUE组件父子传值问题，通俗易懂
子向父传值：
页面包含子组件< child />：

<template>
    <div>
         <child  v-on:getData ="getmethodData"/>  // 子组件
    </div>
</template>
<script>
    methods: {
        getmethodData(data){
              console.log(data);   // 获取从子组件传递过来的值 123
        }
  }
</script>
子组件写法：
<template>
    ........
</template>
<script>
   methods: {
       goFather(123){
          this.$emit('getData',123)
       }
   }
</script>`

其中子组件v-on绑定如果导致页面报错可能是eslint报错建议更换为@；通俗的解释就是子组件通过$emit方式将getData赋值，然后在父组件中绑定方法来获取这个getData值。

父向子传值：

父组件：
<template>
   <Child :data="getData"/>   //子组件
</template>
<script>
export default{
   data() {
      return {
         getData: 123,
      }
   }
  }
</script>

子组件：
<template>
.....
</template>
<script>
export default {
     props: ['data']  // 获取父组件传递过来的123；
}
</script>

有些时候因为项目自己定义的规则不同，props:[‘data’]获取不到值页面还会报错，建议另一种写法

<script>
 export default {
    props : {
    data: { 
      type: Object,  //  值的类型(对象)
      default() {
         return {};
      },
    }
 }
}
</script>
当值得类型不是Object的时候 只需要：
<script>
 export default {
    props : {
    data: { 
      type: String,  //  值的类型（字符串）
      default: '',
    }
 }
}
</script>