vue3个人心得---（操作进阶）emit调用父函数---与透传\props的区别

emit监听事件

一、调用父函数的三种方式

有三种调用父函数的方式，分别是透传、props、emit。

1、透传

可以把函数放在属性里或放在事件、自定义事件里传递给子组件调用，如下：
父组件

<template>
  <BlogPost e='测试调用父函数' :suxin="hansu" @click="hansu" @cli="hansu"/>
</template>
<script setup>
import BlogPost from './Hello.vue'
function hansu(a,b){console.log(a,b)}
</script>

子组件

<template>
  {{$attrs.e}}<br>
<button @click="$attrs.suxin('我是透传','属性调用')">我是属性调用</button>
<button  @click="$attrs.onClick('我是透传','事件调用')">我是事件调用</button>
<button  @click="onCli('我是透传','自定义事件调用')">我是自定义事件调用</button>
</template>
<script setup></script>

2、props调用函数

可以把函数放在属性里或放在事件、自定义事件里传递给子组件调用，注意要用defineProps函数声明。如下：
子组件

<template>
  {{$attrs.e}}<br>
<button @click="suxin('我是Props','属性调用')">我是属性调用</button>
<button  @click="onClick('我是Props','事件调用')">我是事件调用</button>
<button  @click="onCli('我是Props','自定义事件调用')">我是自定义事件调用</button>
</template>
<script setup>
defineProps({suxin:null,onClick:null,onCli:null})
</script>

3、emit调用函数

可以调用放在事件、自定义事件里的函数，不能调用放在属性里的函数。
在<template>调用可以不用defineEmits函数声明。如下：

<template>
  {{$attrs.e}}<br>
<button  @click="$emit('click','我是emit','事件调用')">我是事件调用</button>
<button  @click="$emit('cli','我是emit','自定义事件调用')">我是自定义事件调用</button>
</template>
<script setup></script>

注意：父函的写法，透传和Props在子组件中事件名前要加on首字母要大写，而emit在子组件中事件名前不用加on及大写。

二、emit书写规范

1、在模版部调用

父函数是以$emit函数参数的形式被调用，子组件可向函数传递实参，实参以$emit函数参数的形式书写在父函数的后面，在<template>调用可以不用defineEmits函数声明。书写规范如下：
@click="$emit('父函','参1','参2')"

2、defineEmits声明

普通声明： defineEmits(['父函名','父函名'])
所要传进来的父函名放在[]中括号里；
父函名要加引。
较验声明： defineEmits({父函名:(参数)=>{较验函数},父(参){较验}})
所要传进来的父函放在{}大括号里
父函值为较验项，较验项需放在{}大括号里。

3、在逻辑部调用

在<script setup>上调用一定要先用defineEmits函数声明。
defineEmits函数声明后需赋值给变量，父函数是以这个变量函数参数的形式被调用，向父函数传递的实参书写在父函数的后面。如下：

const bodu=defineEmits(['父函'])
bodu('父函'，参数)

三、defineEmits较验

defineEmits较验是以较验函数返回值来判定的。函数返回值为true时，不发出报警，无返回值或返回值为false时会发出报警。
defineEmits较验只有报警功能，不会阻止事件的运行。
两种书写方式：
属性式：{父函名:(参数)=>{较验项返回值}}
函数式：{父函名(参数){较验项返回值}}
当属性式的属性值为null时，即会跳过较验

1、参数

较验函数的形参为传递给父函数的参数。
较验函数不能引用在 setup 范围中声明的局部变量。但是，它可以引用导入的绑定，因为它们也在模块范围内。

2、较验

可通过在较验函数体内用return true关闭系统默认的报警样式，使用console.log打印自定义的报警样式。
a、较验参数类型
if(!(a instanceof String)){console.log(……)}或
if(typeof(a)!=String){console.log(……)}
b、较验参数非空
if(!a){console.log(……)}
c、参数赋值无效
较验的参数为形参，给形参赋值不能改变实参，如下设置缺省值是无效的：if(!a){a='我是默认'}