vue3中setup props与$emit的使用

前言：

        今天在做项目时，突然看见defineProps的用法，跟我平常的习惯不一样，所以去自己尝试了一下，感觉自己确实学的太公式化了，所以这里记录一下。

        在vue3中不需要我们手动引入。

props用法

        第一种:

defineProps(['pages']);

        第二种

//可以设置传递类型和默认值
const = defineProps({
  selectedNodeIds: {
    type: Array,
    default: () => [],
  },
  selectedPageId: {
    type: String,
    default: '',
  },
  pages: {
    type: Array,
    default: () => [],
  },
});

总结：如果没别的需求第一种即可，更快捷

但是采用第一种，我们可以在html结构中可以直接使用pages展示数据，但是在js中是无法访问到的，必须要通过前面的变量接收也就是const props = defineProps,在js中通过props.xxx才能访问,并且改动后，在html中也需要通过props.xxx才能展示数据了，算是一个小知识点吧。

$emit

父组件：

//监听事件
 <avatar-upload
   @getAvatar="onGetAvatar"
 ></avatar-upload>

子组件：

const emits = defineEmits(['getAvatar']);

//使用
emits('getAvatar',参数)