vue3ts 常用总结

// main.ts
import { createApp } from 'vue'
import APP from './App.vue'
const app = createApp(APP)
  const getLabelv = (options: any, value: any) => _.get(_.find(options, { value }), 'label', '')
  app.config.globalProperties.$getLabel = getLabel // 全局

// children.vue
<template>
    {{name}}
    <p>{{ $getLabel(types, type) }}</p> // 颤三
    <p>{{ proxy.$getLabel(types, type) }}</p> // 颤三
</template>
import { ref, nextTick, onBeforeMount, getCurrentInstance, computed, onMounted, watch, defineProps, defineEmits, defineExpose } from 'vue'
const emit = defineEmits([ 'change', 'update:filterForm'])
const props = defineProps({
    align: {
        type: String,
        default: 'center'
    },
    tests: {
      default: (props) => {
      return inject('test', props.align)
    }
  },
const type= ref<number>(1)
const types = [
    { label: '颤三', value: 1 }，
    { label: '里斯', value: 2 }
]
const name  = computed(() => {
    return 'name'
})

const { proxy } = getCurrentInstance() as any

const name = ref<string>('zhangsan')
const init = () => {console.log('内部方法')}
defineExpose({
    init,
    name
})

// father.vue
<template>
    <div>
        {{ title }} //  zhangsna
        <children ref='child'></children>
    </div>
    
</template>
import { ref, nextTick, onBeforeMount, getCurrentInstance, computed, onMounted, watch } from 'vue'
const child = ref()
const title = ref<string>('')
title.value = child.value.name

onMounted(() => {
    child.value.init() // 内部方法
})