基本思想
1. 父组件中给
子组件标签通过@绑定事件
2. 子组件内部通过
emit
父组件:
<script setup>
// 子传父
// 1. 父组件中给子组件标签通过@绑定事件
// 2. 子组件内部通过 emit 方法触发事件
import SonCom from '@/components/son-com.vue';
import { ref } from "vue";
const money = ref(200)
const getMoney =()=>{
money.value++
}
// changeFn事件说明
const changeFn=(newMoney)=>{
money.value=newMoney
}
</script>
<template>
<div>
<h3>父组件--{{ money }}</h3>
<button @click="getMoney">挣钱</button>
<!-- 父组件绑定 -->
<SonCom @changeMoney="changeFn" car="宝马车" :money="money" ></SonCom>
</div>
</template>
子组件:
<script setup>
const props = defineProps({
car:String,
money:Number
})
console.log(props);//对象里面有car
console.log(props.car);//宝马车
console.log(props.money);//200
const emit = defineEmits(['changeMoney'])//数组里面就是要触发的事件
const buy =()=>{
// props.money--,子组件中直接修改父组件的值,直接报错
// 需要emit触发事件
emit('changeMoney',5)
}
</script>
<template>
<div class="son">子组件---{{ car }}--{{ money }}
<!--先给子组件绑定事件 ,给父组件发起申请才能改变父组件的值 -->
<button @click="buy" >花钱</button>
</div>
</template>
<style scoped>
.son{
border: 1px solid #000;
padding: 30px;
}
</style>