基本思想
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>