本文目的是记录使用vue3的时候的一些属性的个人理解。

一、defineExpose

1. 官方说明
   
2. 个人理解
   在 <script setup>组件中，defineExpose可以暴露出组件的属性。
3. 项目实战

   // dialog组件
   <script setup>import { ref } from 'vue'import { Close } from '@element-plus/icons-vue'// dialog 是否可见const dialogVisible = ref(false)// 配置const config = ref({})// 回调let callBack = null// 组件暴露出的方法和属性defineExpose({openDialog(_config) {config.value = _configconfig.value.id = _config.idconfig.value.width = _config.width || '50%' // 默认宽度50%，允许自定义宽度callBack = _config.callbackdialogVisible.value = true},})</script><template><el-dialogv-model="dialogVisible"align-centerclass="i-dialog":show-close="false":append-to-body="true":width="config.width"></el-dialog></template>// 父页面const dialog = ref()function handleStopApi(id) {dialog.value.openDialog({width: '480',title: '您确认要停用该企业吗？',message: '停用后该企业无法再次登录系统！',confirmText: '停用',callback: () => {disableOrg(id)},id,})}<templete><Dialog ref="dialog" /></templete>
   

二、自定义指令

1. 官方说明
   
2. 个人理解
   自定义指令，写好自定义指令后，注册指令，页面中通过v-***调用
3. 项目实战

// src\directives\throttle.js
import throttle from 'lodash/throttle';export default function throttleDirective() {return {fn: null,mounted(el, binding) {const handler = Array.isArray(value) ? value[0] : value;const delay = Array.isArray(value) ? value[1] : 1000; // Default delay to 1000 ms if not providedconst handleThrottle = throttle(handler, delay);el.addEventListener(arg, handleThrottle);},};
}// main.js
import throttleDirective from '@/directives/throttle.js'app.directive('throttle', throttleDirective())// 使用自定义组件
<template><button v-throttle:click="[handleClick, 2000]">Click Me</button><button v-throttle:click="handleClick">Click Me</button>
</template><script>
export default {methods: {handleClick() {console.log('Button clicked!');},},
};
</script>

defineModel

1. 官方说明
   
2. 个人理解
   父子组件双向数据绑定使用defineModel, 比以前的写法更加便捷

	<!-- Child.vue --><script setup>const props = defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])</script><template><input:value="props.modelValue"@input="emit('update:modelValue', $event.target.value)"/></template>