vue3.0组合API-父子通讯

目标：掌握使用props选项和emits选项完成父子组件通讯

父传子：

<template>
  <div class="container">
    <h1>父组件</h1>
    <p>{
    
    {
    
    money}}</p>
    <hr>
    <Son :money="money" />
  </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>
  <div class="container">
    <h1>子组件</h1>
    <p>{
    
    {
    
    money}}</p>
  </div>
</template>
<script>
import {
    
     onMounted } from 'vue'
export default {
    
    
  name: 'Son',
  // 子组件接收父组件数据使用props即可
  props: {
    
    
    money: {
    
    
      type: Number,
      default: 0
    }
  },
  setup (props) {
    
    
    // 获取父组件数据money
    console.log(props.money)
  }
}
</script>

子传父：

<template>
  <div class="container">
    <h1>父组件</h1>
    <p>{
    
    {
    
    money}}</p>
    <hr>
+    <Son :money="money" @change-money="updateMoney" />
  </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>
  <div class="container">
    <h1>子组件</h1>
    <p>{
    
    {
    
    money}}</p>
+    <button @click="changeMoney">花50元</button>
  </div>
</template>
<script>
import {
    
     onMounted } from 'vue'
export default {
    
    
  name: 'Son',
  // 子组件接收父组件数据使用props即可
  props: {
    
    
    money: {
    
    
      type: Number,
      default: 0
    }
  },
  // props 父组件数据
  // emit 触发自定义事件的函数
+  setup (props, {
     
     emit}) {
    
    
    // 获取父组件数据money
    console.log(props.money)
    // 向父组件传值
+    const changeMoney = () => {
    
    
      // 消费50元
      // 通知父组件，money需要变成50
+      emit('change-money', 50)
+    }
+    return {
    
    changeMoney}
  }
}
</script>

扩展：

在vue2.x的时候 .sync 除去v-model实现双向数据绑定的另一种方式

<!-- <Son :money='money' @update:money="fn"  /> -->
<Son :money.sync='money'  />

在vue3.0的时候，使用 v-model:money=“money” 即可

    <!-- <Son :money="money" @update:money="updateMoney" /> -->
    <Son v-model:money="money" />

总结：

父传子：在setup种使用props数据 setup(props){ // props就是父组件数据 }
子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }
在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令