vue3defineprops属性简介

在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。

这里需要注意！！这是definePropsAPI是一个函数，它的返回值就是父亲传来的属性。

这里变量名不一定非得是props，js可并没有规定不允许汉字作为变量名哦 

在 单文件组件中，向组件传递数据，下面以 blog(父组件)和article(子组件)为例。

1.例子

在blog.vue中，先引入article。

// Blog.vue

//Article.vue

2.说明

• 对象形式声明：key 是对应的名称。value在上面的示例中是prop中对应的类型。value的具体格也可以是一个对象，常用的属性如下

{
	type:String ,// 如果可能存在多个类型，则可以写成 [String,Number]
	default:'默认值',
	required: true// 是否必传 ，在不声明为true 的情况下，所有prop 默认为非必填。
}

// 上面的title 字段展开则为
title:{
	type:String
}

• 字符串数组声明：数组的每一项字面量就为prop对应的名称。

3 使用

在template 模版中，直接使用 defineProps() 声明过后的名称。
在setup中（以1.例子中的代码为例），只需要直接 props.title 就可以获取到title 对应的值。

props一般是单向的，在子组件中不应该对 props 进行修改。如果需要在子组件中对props进行处理，应当使用ref（初始值为props的值）：

const formatTitle = ref(props.title)
//这样，子组件中后续对 formatTitle 的修改，就与原props.title 无关联了

如果子组件中对数据更新，确实需要修改原数据，那么应当通知父组件或者props传入的地方，对数据进行调整（涉及到组件的事件）

在上述例子中，props是一个对象，并且每个属性都要传递到子组件中，可以使用不指定参数的，v-bind 方法：

每一个在组件上 v-bind( : ) 的值，都不应该重复（无参数的v-bind重复出现，编辑器会报错）。如果出现同名的 v-bind 绑定，后绑定会覆盖前一个。
需要注意的是，props的名称不应该与组件中的其它属性名称重复。

选项式props，emits-> 组合式props,emits:

比如，下面这种 选项API 方式：

        props: {
    name: {
      type: String,
      required: true.
    }
  },
  emits: ['someEvent', 'increaseBy']

我们将它转成 组合API 方式：

        const props = defineProps<{
  name: string;
 }>();
 const emit = defineEmits<{
  (event: 'someEvent): void;
  (event: 'increaseBy', value: number): void;
 }>();