vue3(笔记)2.0 生命周期函数.父子通信.ref以及模块引用.跨层级通信.v-model(基于defineModel)

---生命周期函数(组合式API)

示例代码(其他同理):

onMountend(()=>{
    close.log('11')
})

 ---父子通信

--父传子

--子传父

---ref与defineExpose进行模块引用

--ref(获取dom元素)-在vue3中很关键

--defineExpose (暴露组件数据和方法)

作用:对子组件的方法进行暴露

---跨层级通信(provide inject)

使用时先要导入对应函数provide  inject

传递数据:

                                                  message就是传入的数据了~

传递方法:

---defineOptions(定义Options API选项) 扩展

---v-model(基于defineModel)

原理:

原生的v-model示例代码(不推荐):

父组件:

 <ChannelSelect v-model="params.cate_id"></ChannelSelect>

子组件(代码片段):

<script setup>
// 父传子 接受v-model的值
defineProps({
    modelValue:{
        type:[Number,String]
    }
})

// 子传父的 值
const emit = defineEmits(['update:modelValue'])

</script>
<template>
    <!-- 手动接受v-model的值 修改和更新老爹的数据  $event为当前选中的值 -->
     <el-select 
     :modelValue="modelValue" 
     @update:modelValue="emit('update:modelValue',$event)"
     style="width: 200px;">
               ......
            </el-select>
</template>

使用(​​​​​​​defineModel函数)的v-model(推荐): 

需要导入defineModel函数    v-model获取的值可全局修改

声明:无需再传递数据,父子组件可直接用v-model双向绑定传递数据