vue3--父子通信--父传子

基本思想

1. 父组件中给 子组件绑定属性

2. 子组件内部通过 props选项接收

以下是父组件:

<script setup>
// 父传子
// 第一点：父组件中给子组件绑定属性
// 第二点：子组件内部通过props选项接收
// 局部注册将子组件导入,导入后直接使用<SonCom></SonCom>
import SonCom from '@/components/son-com.vue';


// 第二:传递动态的值
import { ref } from "vue";
const money = ref(200)


const getMoney =()=>{
  money.value++
}


</script>
<template>
  <div>
    <h3>父组件--{{ money }}</h3>


   <button @click="getMoney">挣钱</button>

    <!-- 第一：子组件以添加属性的方式传值 -->
   <SonCom car="宝马车" :money="money"></SonCom>
  </div>
</template>

以下是对应的子组件:

<script setup>
// 父传子---子组件
// 第一点：父组件中给子组件绑定属性
// 第二点：子组件内部通过props选项接收
// 注意：由于写了setup，所以无法直接配置props选项
// 所以此处使用编译器宏函数，来接收子组件传递的函数

// 编译器宏注解：
// defindProps里面本质还是props配置项
// 原理：就是编译阶段的一个标识，实际编译解析的时候，遇到后会进行编译转换

const props = defineProps({
    car:String,
    money:Number
})
console.log(props);//对象里面有car
console.log(props.car);//宝马车
console.log(props.money);//200

</script>
<template>
  <div class="son">子组件---{{ car }}</div>
</template>
<style scoped>
.son{
    border: 1px solid #000;
    padding: 30px;
}
</style>