vue3父传子ref

父组件通过props属性将数据传递给子组件。在子组件中，可以通过props对象来接收父组件传入的数据。在Vue 3中，可以使用ref函数来创建响应式数据，将其赋值给props属性，从而实现父传子的数据传递。在子组件中，可以通过访问props属性来获取传递过来的数据。

以下是一个示例代码，演示了父组件向子组件传递ref属性的方法：

在父组件father.vue中：

<template>
  <Header :openpagevaria="openpagevaria"></Header>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Header from './Header.vue';

export default defineComponent({
  components: {
    Header,
  },
  
  setup() {
    const openpagevaria = ref("DisplayPerInfo");
    
    return {
      openpagevaria,
    };
  },
});
</script>

在子组件Header.vue中：

<template>
  <div>{{ openpagevaria }}</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    openpagevaria: {
      type: String as PropType<string>,
      required: true,
    },
  },
});
</script>

在上述代码中，父组件通过`:openpagevaria="openpagevaria"`的方式将openpagevaria属性的值传递给子组件Header。子组件通过props属性接收父组件传入的值，并在模板中进行渲染。