vue3怎么把一个组件的值传到另一个组件

在 Vue3 中，你可以通过 Props 和 Emit 来实现组件之间的数据传递。

首先，在需要传递数据的组件上，使用 props 属性来声明需要传递的属性：

// ChildComponent.vue
<template>
  <div>
    <p>My name is {{ name }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

然后，在需要接收数据的组件上，使用 emit 属性来声明需要接收的事件：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :name="myName" @nameChange="onNameChange" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myName: 'Vue'
    }
  },
  methods: {
    onNameChange(newName) {
      this.myName = newName
    }
  }
}
</script>

在这个例子中，我们在 ParentComponent 中使用了 ChildComponent，并将 myName 作为 props 传递给了 ChildComponent。我们还声明了一个 @nameChange 事件，用来接收 ChildComponent 中发出的事件。

在 ChildComponent 中，我们使用了 props 属性来声明需要接收的属性，并在模板中使用了它。我们还声明了一个 changeName 方法，并在其中使用 $emit 来触发 @nameChange 事件，将新的名字传递给 ParentComponent。

// ChildComponent.vue
<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  methods: {
    changeName() {
      const newName = 'Vue 3'
      this.$emit('nameChange', newName)
    }
  }
}
</script>

这样，当我们点击 ChildComponent 中的按钮时，会触发 changeName 方法，并将新的名字传递给 ParentComponent 中的 onNameChange 方法，从而更新了 myName 的值，从而更新了 ChildComponent 的值。