在Vue2 Vue3中进行父子传参

在vue3中进行父子传参和vue2其实是大同小异的

在vue2中进行父传子的方法

在父组件中的子标签中自定义一个属性        

:自定义属性的名字="自定义属性值"

在子组件中用props接收

在vue2中进行子传父的方法

在父组件的子标签中自定义一个事件，在子组件中用this.$emit接收

在vue3中进行父传子的方法

在父组件中的子标签中自定义一个属性

在子组件中用defineProps接收

//父组件

  <el-header><Header :isCollapse="isCollapse"/>

  </el-header>

//子组件

const props = defineProps({

  isCollapse:{

    type:［Boolean］,

    default:false

  }

})

注：props.变量名

在vue3中进行子传父的方法

在父组件的子标签中自定义一个事件，在子组件中用emitdefineEmits接收

//子组件

const emit = defineEmits<{ (e: 'changeIscollapse', id: boolean): void }>()

const changeStatus = () =>{

  emit('changeIscollapse',!props.isCollapse)

}

//父组件

 <el-header><Header @changeIscollapse="changeIscollapse"/>

 </el-header>

const changeIscollapse = (collapse:Boolean)=>{

  console.log('拿到了子组件的值',collapse)

}