vuejs项目开发如何利用Props实现父子组件传参

vuejs项目开发中如何利用Props实现父子组件传参，下面web建站小编给大家详细介绍一下实现代码！

父组件代码

复制代码<template>
  <!-- 使用子组件 -->
  <Child :msg="message" />
</template>
 
<script setup>
import Child from './components/Child.vue' // 引入子组件
 
let message = '你好，朋友！'
</script>
1
2
3
4
5
6
7
8
9
10

子组件代码

复制代码<template>
  <div>
    {{ msg }}
  </div>
</template>
 
<script setup>
 
const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})
 
console.log(props.msg)
 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18