Vue3中的父子通讯

     Vue3中的父子传值用的同样是自定义属性props和自定义事件emit,但是在具体使用上还要和vue2中有区别

（1）父组件向子组件传值：自定义属性：props

父组件代码：

<template>
  <div>
    <div>父子组件的交互</div>
    <button @click='money=200'>修改</button>
    <hr>
    <Child :money='money' />
  </div>
</template>

<script>
import Child from './Child.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { Child },
  setup () {
    const money = ref(100)
    return { money }
  }
}
</script>

子组件代码：

<template>
  <div>
    子组件 {{money}}
  </div>
  <button @click='getMoney'>点击</button>
</template>
<script>
export default {
  name: 'Child',
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props) {
    // Vue3中，使用形参props获取所有父组件传递的数据
    // props的数据是只读的，不可以在子组件直接修改
    const getMoney = () => {
      console.log(props.money)
    }
    return { getMoney }
  }
}
</script>

  总结：

1、父组件向子组件传值，子组件通过自定义属性props接收，

2、在子组件中js代码中要想接收到props的属性值，需要通过setup函数的第一个形参props获取

 （2）子组件向父组件传值：自定义事件emit

<template>
  <div>
    <div>父子组件的交互</div>
    <button @click='money=200'>修改</button>
    <hr>
   <Child :money='money' @send-money='getMoney' />
  </div>
</template>

<script>
import Child from './Child.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { Child },
  setup () {
    const money = ref(100)
   const getMoney = (value) => {
     // value就是子组件传递回来的钱
     money.value = money.value - value
   }
  return { money, getMoney }
  }
}
</script>

<template>
  <div>
    子组件 {{money}}
  </div>
  <button @click='getMoney'>点击</button>
</template>
<script>
export default {
  name: 'Child',
  // 子组件触发的自定义事件需要在emits选项中进行声明（直观的看到本组件触发了那些自定义事件）
  emits: ['send-money'],
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  setup (props, context) {
    // Vue3中，使用形参props获取所有父组件传递的数据
    // props的数据是只读的，不可以在子组件直接修改
    const getMoney = () => {
      console.log(props.money)
      // this.$emit('send-money', 50)
      // 向父组件传递数据50
     context.emit('send-money', 50)
    }
    return { getMoney }
  }
}
</script>

 总结：

1、子组件自定义的事件，通过setup函数的第二个参数context.emit的方法触发自定义事件，然后父组件接收自定义事件就可以了

2、子组件触发的自定义事件需要在emits选项中申明