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

基本思想

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>