vue3+ts父子组件传值（区分有无使用setup语法糖）

setup语法糖

defineProps获取组件传值

import { ref, defineProps } from 'vue'
const props = defineProps({
    width: {
        type:String,
        required: true,
        default: '100rpx'
    },
    height: {
        type:String,
        default: '100rpx'
    }
})
// 业务代码获取值，trmplate直接使用width即可
console.log(props.width)

结合ts

import { ref, defineProps } from 'vue'
interface Props {
    width?: string
    height?: string
}
const props = withDefaults(defineProps<Props>(), {
    width: '100rpx',
    height: '100rpx'
})

// 业务代码获取值，trmplate直接使用width即可
console.log(props.width)

defineEmits获取组件传值

import { ref, reactive, defineEmits } from 'vue'

const emit = defineEmits(['success', 'reset'])

const handleSure = () => {
  emit('success', '鱼鱼：确定~~~')
  let arr = itemList.map(item => item.select)
  let title = []
  itemList.map(item => {
    item.select.map(subItem => {
      title.push(item.lebelList[subItem].name)
    })
  })
  value1.value = title.length > 0 ? title.join(',') : '菜单一';
  proxy?.selectComponent('.itemSure').toggle(false)
}

结合ts

import { ref, reactive, defineEmits } from 'vue'

const emit = defineEmits<{
  (event: 'success', res: string): void,
  (event: 'reset', res: string): void
}>()


const handleSure = () => {
  emit('success', '鱼鱼：确定~~~')
  let arr = itemList.map(item => item.select)
  let title = []
  itemList.map(item => {
    item.select.map(subItem => {
      title.push(item.lebelList[subItem].name)
    })
  })
  value1.value = title.length > 0 ? title.join(',') : '菜单一';
  proxy?.selectComponent('.itemSure').toggle(false)
}
const handleReset = () => {
  emit('reset', '鱼鱼：重置~~~')
  itemList.map(item => {
    item.select = []
    item.lebelList.map((subItem, subIndex) => {
      subItem.isSelect = item.default === subIndex
    })
  })
}

不采用语法糖

export default {
  props: {
    name: String
  },
  setup(props, { emit }) {
    console.log(props.name)
	const handleReset = () => {
	  emit('reset', '鱼鱼：重置~~~')
	}
  }
}