研学网站平台建设方案dede门户网站模版

---生命周期函数(组合式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双向绑定传递数据