vue3.0 父子组件通信

子传父：子组件调用父组件方法

vue3.0不再支持this，所以this.$emit()方法不在被支持。

以下为VUE3.0新写法

子组件：

<script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
    name:'',
    setup(prop,context){
           const data = ref(0)
 
        //在子组件的方法中调用父组件的方法
          const handleClickChildBtn = () => {
               context.emit('父组件方法名',data)
            }
     }
})

    
setup()方法的第二个参数为 vue上下文环境。

父组件无明显变化，按照vue3语法书写即可。

父传子：通过setup(props)方法的第一个参数，

export default defineComponent({
    name:'',
    props:['name']
    setup(prop,context){
         // 通过props 获取父组件传过来的值
         let name = props.name
 
 
        //增加监听
        watch(
        () => props.name,
        (nval,oval) => {
           //todo something 
        }
        )
    
     }
 
 
})