vue3 基础用法

emit 使用

//引入子组件
<子组件 v-model:updateKey="key" />


//子组件传参
 const emit = defineEmits(['customChange'])
 emit("update:updateKey",  '新的参数')
  

https://www.shuzhiduo.com/A/n2d9NnaozD/

props 传参 监听

const props =defineProps({
   value:{
     type:String
   }
})
// 监听
 watch(() => props.value,(newVal, oldVal) => {
   avatrtCode.value = newVal
 }, {immediate:true,deep:true})

传参
父组件通过ref调用子组件方法

//子组件
<script setup>
const sonFun = ()=>{
  console.log('已经被调用')
}
//抛出方法
 defineExpose({
        sonFun
    })
</script>

//父组件
//引入子组件定义ref
<son ref="sonRef"/>
<script setup>
let sonRef = ref()
sonRef.value.sonFun()
</script>