vue3父组件拿子组件的值

在Vue 3中，你可以通过使用`ref`或`v-model`来在父组件中访问子组件的值。

1. 使用`ref`：在子组件中定义一个`ref`，并将要传递给父组件的值赋给该`ref`。然后在父组件中通过访问子组件的`ref.value`来获取值。

在子组件中：

import { ref } from 'vue';

export default {
  setup() {
    const childValue = ref('');

    // 其他代码...

    return {
      childValue
    };
  }
}

在父组件中：

<template>
  <div>
    <child-component :value="childValue"></child-component>
    <button @click="getChildValue">获取子组件值</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const childValue = ref('');

    const getChildValue = () => {
      console.log(childValue.value);
    };

    return {
      childValue,
      getChildValue
    };
  }
}
</script>

2. 使用`v-model`：在子组件中使用`v-model`绑定要传递给父组件的值。然后在父组件中通过使用`v-model`绑定来访问子组件的值。

在子组件中：

<template>
  <input v-model="childValue" />
</template>

<script>
export default {
  setup() {
    let childValue = '';

    // 其他代码...

    return {
      childValue
    };
  }
}
</script>

在父组件中：

<template>
  <div>
    <child-component v-model="childValue"></child-component>
    <button @click="getChildValue">获取子组件值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childValue: ''
    };
  },