vue3 Composition API中该如何实现父子组件传值

封装组件想必是大家在vue2中实现代码重用化的常见手法了，但vue3的Composition确不然我们那么方便的使用this了，那么我们该如何实现父子组件间的传值呢
首先我们还是创立一个父组件和一个子组件
在父组件中引入子组件 注意路径别直接复制啊

<template>
    <div id="app">
       <HelloWorld :datas = "item" @intercept = "intercept "></HelloWorld>
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
export default {
  components: {
    HelloWorld
  },
  setup(){
      const item = ref(33);
      const intercept = function(actual){
          item.value = actual;
      }
      return {
	     item,
	     intercept
	 }
  }
}

很显然我们父向子传值的概念并没有什么大变化
那么我们来看看子组件

<template>
   <div @click = "replacement" class = "Master">
       {{age}}
   </div>
</template>
import { ref } from 'vue'
export default {
export default {
  props: {
    datas:Number
  },
  setup(props,ctx){
      const age = ref(props.datas)
      const replacement = function(){
	      ctx.emit("intercept",22);
	  }
	   return {
	      age,
	      replacement
	   }
  }

其实还是充满了vue2的味道 只是语法上未来避免this做了小小的改动，相信熟悉vue2的小伙伴们一看就能明白