vue3页面传值拿值

在 Vue 3 中，可以使用 props 属性在父组件和子组件之间传递数据。具体步骤如下：

1. 在父组件中定义要传递的数据，通过 props 将其传递给子组件。

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!',
    };
  },
};
</script>

2. 在子组件中通过 props 接收父组件传递的数据。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

这样就实现了父组件向子组件传递数据的功能。如果需要从子组件向父组件传递数据，可以使用自定义事件和 $emit() 方法。