vue3组合API中的父子通信

父传子：

父亲发送数据--父组件中使用子组件，在子组件标签上动态传入数据 :money="money"

儿子接收数据--通过单独的props配置项接收数据 props:{money:{type:Number,default:0}}。注意在setup中使用props的数据需要在setup中显式传入props参数 setup(props)

子传父：

儿子通过emit()指定指令名称和传递的数据 emit('change-money',50)。注意使用emit方法需要在setup中显式引入 setup(props,{emit})

父亲在子组件上通过使用该名称和自己方法绑定，接收数据 @change-money="changeMoneyFather"。注意此处绑定自己方法不加括号，因为需要接收儿子传入的默认参数

补充setup中第二个参数(https://cn.vuejs.org/api/composition-api-setup.html#setup-context)

export default {
   setup(props, context) {
       // 透传 Attributes（非响应式的对象，等价于 $attrs）
       console.log(context.attrs)

       // 插槽（非响应式的对象，等价于 $slots）
       console.log(context.slots)

       // 触发事件（函数，等价于 $emit）
       console.log(context.emit)

       // 暴露公共属性（函数）
       console.log(context.expose)
   }
}

父传子：

父组件

<template>
  <div class="container">
    <h1>父组件</h1>
    <p>{{money}}</p>
    <hr>
    <Son :money="money"></Son>
  </div>
</template>

<script>
import {ref} from "vue";
import Son from "./Son.vue";
export default {
  name: "App",
  components:{
    Son
  },
  setup() {
   const money=ref(100)

   return {money}
  },
};
</script>

子组件

<template>
  <h1>子组件</h1>
  <p>{{money}}</p>
</template>

<script>
export default {
  name: "Son",
  props:{
    money:{
        type:Number,
        default:0
    }
  },
  setup(props){
    console.log(props.money)
  }
};
</script>

子传父：

父组件

<template>
  <div class="container">
    <h1>父组件</h1>
    <p>{{money}}</p>
    <hr>
+    <Son :money="money" @change-money="updateMoney"></Son>
  </div>
</template>

<script>
import {ref} from "vue";
import Son from "./Son.vue";
export default {
  name: "App",
  components:{
    Son
  },
  setup() {
   const money=ref(100)
+  const updateMoney=(newMoney)=>{
+    money.value=newMoney
+  }
   return {money,updateMoney}
  },
};
</script>

子组件

<template>
  <h1>子组件</h1>
  <p>{{money}}</p>
+  <button @click="changeMoney">花了50</button>
</template>

<script>
export default {
  name: "Son",
  props:{
    money:{
        type:Number,
        default:0
    }
  },
+  setup(props,{emit}){
    console.log(props.money)
+    const changeMoney=()=>{
+        emit('change-money',50)
+    }
+    return {changeMoney}
  }
};
</script>