原生js中，const { userData } = this.$parent; 父组件传值给子组件

在JavaScript原生的Vue.js框架中，`this.$parent`是一个特殊的对象，它引用了当前组件的直接父组件实例。当你在子组件中使用`const { userData } = this.$parent;`这样的语法时，你在子组件内部创建了一个名为`userData`的新变量，并从父组件中接收名为`userData`的数据属性。

这是一种常见的父子组件通信的方式，通过 props（属性）进行数据向下传递。父组件可以将需要共享的数据作为props传递给子组件，然后子组件就可以通过这个路径访问到这些数据。

示例：

// 父组件
<template>
  <div>
    <child-component :userData="parentUserData"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentUserData: '这是父组件的数据',
    };
  },
};
</script>

// 子组件
<template>
  <div>{{ userData }}</div>
</template>

<script>
import { prop } from 'vue';
export default {
  props: {
    userData: String, // 接收一个字符串类型的prop
  },
  computed: {
    // 计算属性，用于在模板中显示接收到的数据
    processedData() {
      // 这里你可以对数据做进一步处理
      const { userData } = this;
      return userData.toUpperCase();
    }
  },
};
</script>