vue2和vue3中关于父子组件传值的区别，以及实现父子组件传值的双向绑定的区别

1. 首先是写法的不同，vue2中就是父组件通过v-bind传值，然后子组件通过prop接收，然后字传父通过this.emit（'xxx'）,父组件通过@xxx接收,

2.  vue3中也是通过v-bind传值，然后子组件通过prop接收，使用emit传给父组件

3. 不过vue3的script有两种写法， 第一种是使用setup()的组合API，另一种是使用setup的语法糖，写法上有不同

1.使用setup()的组合API

• 使用emit需要将emit的方法写到和setup同级的地方，然后使用需要写在setup里

• 

•  vue3中没有this，而且使用prop和emit需写在setup里，有两种情况

• 

•  第一种是使用context，使用contextemit 

•  第二种是使用{emit}

2.使用setup的语法糖

• 我们无法访问组件实例或 context 上下文参数，需要引入defineProps和defineEmits

• 

• 

父子组件传值的双向绑定

vue2中

•  在vue2中我们可以使用.sync实现父子组件的双向绑定，效果就是父传子，子改变了，父组件就不需要@接收然后去手动改变了，就能直接双向绑定

• 

vue3中

•  vue3中就不使用.sync了，使用v-model代替

•  在setup组合式api里

•    父组件
     <child v-model:drawer="drawer"></child>  
     子组件
      export default {
             props:{
                drawer:{}
             },
            setup(props,{emit})  {
                const closeHander=()=>{
                    emit('update:drawer', false)
                }
                return {
                    closeHander
                }
            }
      }
  

• 在setup语法糖里

•   父组件
     <child v-model:drawer="drawer"></child>  
     子组件
    <script lang="ts"  setup>
    import { defineProps ,defineEmits} from 'vue'
    defineProps({
        drawer:{
            type:Boolean,
            default:false
        },
    })
    let $myemit=defineEmits(['update:drawer'])
    
    const closeHander=()=>{
        $myemit('update:drawer',false)
    }
    </script>