vue子组件拿父组件的数据

在Vue中，父组件可以通过自定义属性将数据传递给子组件。子组件可以通过props属性来接收父组件传递的数据。同时，子组件也可以通过this.$attrs来获取父组件传递的所有数据对象。如果子组件中既有props，也有this.attrs，则子组件接收到的数据为props接收对应数据，剩下的在this.attrs对象中。如果父组件只传递了一个数据，则this.attrs接收到的数据为空。下面是一个简单的例子：

父组件：

<template>
  <div>
    <ChildComponent :name="parentName" :age="parentAge" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentName: 'John',
      parentAge: 30
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <p>All attributes: {{ $attrs }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  }
}
</script>

在上面的例子中，父组件通过自定义属性将name和age传递给子组件。子组件通过props属性来接收这些数据。同时，子组件也可以通过this.$attrs来获取父组件传递的所有数据对象。