vue3 父子组件传值

在Vue3中，父组件向子组件传递值可以使用props属性，子组件通过props来接收传递过来的值。父组件可以通过在子组件的标签上使用冒号(:)的方式将数据传递给子组件，子组件则可以在setup函数中使用toRefs函数来解构接收到的props值。以下是一个示例：

父组件传递方式：

<template>
  <div>
    我是父组件
    <Child :info="parentMsg"></Child>
  </div>
</template>

<script setup>
import Child from './Child'
import {ref} from 'vue'

const parentMsg = ref('父组件传递值是a')
</script>

<style scoped>
</style>

子组件接收方式和使用：

<template>
  <div>
    我是子组件拿到了父组件的值是{{info}}
  </div>
</template>

<script setup>
import {toRefs, defineProps} from 'vue'

const props = defineProps({
  // 子组件接收父组件传递过来的值
  info: String,
})

// 使用父组件传递过来的值
const {info} = toRefs(props)
</script>

<style>
</style>

在这个例子中，父组件通过`:info="parentMsg"`将`parentMsg`的值传递给子组件。在子组件中，使用`defineProps`定义了一个`props`对象，并使用`toRefs`将`props`中的`info`解构出来，以在模板中使用。