一看就会的vue3.2语法糖defineExpose defineProps defineEmits

defineExpose defineProps defineEmits三个在 <script setup> 方式中使用

defineProps

1、用于组件通信中父级组件给子级组件传值，其用来声明props,其接收值为props选项相同的值

2、默认支持常见的类型检查，在ts下，我们需要明确变量的类型，类型经常是我们的自定义类型

3、只能在<script setup>中使用

4、不需要被导入即可使用,它会在编译<script setup>语法块时一同编译掉

5、必须在<script setup>的顶层使用，不可以在<script setup>的局部变量中引用

6、不可以访问 <script setup> 中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中
用法：

//父组件
<template>


  <!-- :绑定的是子组件期待接收的  =等号后的是传递的参数 -->
  <Son2 :val="name" />
  
</template>

<script setup>
import Son2 from '@/components/son2.vue';
  let name = '张三'
</script>

<style lang="scss" scoped>

</style>

//子组件
<template>

  
<h1>姓名：{{val}}</h1>

</template>

<script setup>

//第一种
// 以数组的方式接收要传递的值
// const props = defineProps(["val"]);

// 第二种方式可以设置传来值的类型  
 const props = defineProps({
  val: {
    type: String,
    default: ""  //默认值
   }
  
 });

</script>

<style lang="scss" scoped>

</style>

defineEmits

1、用于组件通信中子级组件向父级组件传值，其用来声明emit，其接收内容于emit选项一致

2、只能在<script setup>中使用

3、不需要被导入即可使用,它会在编译<script setup>语法块时一同编译掉，

4、必须在<script setup>的顶层使用，不可以在<script setup>的局部变量中引用

1、用法：

与defineProps一样，无需引入，直接可以使用。使用 defineEmits 声明事件（也就是父级页面上添加的 @监听事件）

2、传参：
在 emits() 的第一个参数，是监听事件的字面量。第二个参数为事件传递的参数。如果该事件有多个参数，第二个参数建议用对象的形式传递

//子组件

<template>

 <!-- <button @click="handelClick">传递给父级</button> -->
</template>

<script setup>
import { onMounted } from 'vue';

/**
 * 在子组件中使用defineEmits来声明emits
 * 其接收值与emit选项一致
 * 传入的选项在全局变量
 * emits函数是defineEmits返回值
 * defineEmits函数参数是个数组，数组内容是自定义函数名称
 * emits函数第一个参数是自定义事件名称，第二个参数是需要传递的内容
 * defineEmits如果放在局部。不在全局。则报错
 * defineEmits is not defined

*/
//可以通过事件触发调用，也可以通过生命周期调用
onMounted(()=>{
  handelClick()
})
//定义一个自定义事件
const emits = defineEmits(['increase'])
const data  ={
  name:'张三',
  age:18,
  id:4546545465
}

function handelClick(){
  //第一个参数为自定义事件名  第二个参数为要传递的数据
  emits('increase',data)
}

</script>

<style lang="scss" scoped>

</style>

//父组件
<template>

  <Son3  @increase='handleIncrease' />

</template>

<script setup>
import Son3 from '@/components/son3.vue';

/**
 * 在父级组件中，使用子级的自定义事件，
 * 在html中去写@自定义事件名称=事件名称
 * 函数中value是个形参，为子级传递过来的数据
 */
//使用自定义事件   value是自定义事件传递过来的参数
function handleIncrease(value) {
  console.log(value);       //{name:'张三', age:18,id:4546545465}
}
</script>

<style lang="scss" scoped>

</style>

defineExpose

1、组件暴露自己的属性以及方法，去供外部使用，常用于父子组件关系

2、在vue3.2中setup 挂载到 script (ref默认是关闭的) 是不能直接使用ref 取到子组件的方法和变量，需要使用defineExpose

用法：

//子组件
<template>

</template>

<script setup >
import { ref } from 'vue'

const count = ref(123456)

function add() {
  console.log('子组件的方法被调用了');
  return 10
}

//暴露当前组件的属性和方法  只需要父级通过ref去获取就可以
defineExpose({
  count,
  add
})
</script>

<style scoped lang="less">

</style>

//父组件
<template>

  <h1>{{number_age}}</h1>
    <!-- 使用ref拿取到子组件 -->
  <Son4 ref="hello" />

</template>

<script setup>
import Son4 from '@/components/son4.vue';
import { onMounted, ref } from 'vue'

onMounted(() => {
  helloClick()
})

  // 父级通常使用ref来定义虚拟dom，用来操作子组件
const hello = ref(null)
const number_age = ref(null)

const helloClick = () => {

  console.log(hello.value.count) // 123456

  const age = hello.value.add()  //子组件的方法被调用了

  number_age.value = age

  console.log(hello.value.add())  //10
}


</script>

<style lang="scss" scoped>

</style>