defineProps、defineEmits、definExpose的用法

1.功能介绍

• defineprops:父组件向子组件传递参数
• defineEmits:父组件向子组件传递函数
• defineExpose:将子组件中的参数和方法暴露给父组件

2.实现过程

CompChild.vue代码:

<template>
  <p>子组件</p>
  <p>{{ props.count }}</p>
  <button @click="emit('func',65276527)">点击</button>
</template>

<script>
export default {
  name: "CompChild"
}
</script>

<script setup>
import {defineProps, defineEmits, defineExpose} from 'vue'

//接收父级传过来的参数
const props = defineProps(["count"]);
//接收父级传过来的方法
const emit = defineEmits(["func"]);

//定义一个参数暴露给父组件
const a = 123;
//定义一个方法暴露给子组件
const funca = () => {
  console.log("子组件中的方法");
}
//将参数a和函数funca暴露给父组件
defineExpose({
  a,
  funca
});
</script>

CompParent.vue代码:

<template>
  <p>父组件</p>
  // 在引用的时候直接向子组件传递参数和函数
  <CompChild ref="compRef" :count="count" @func="func"/>
</template>

<script>
export default {
  name: "CompParentProps"
}
</script>

<script setup>
import CompChild from "@/views/PropsAndEmits/CompChild";
import {onMounted, ref} from 'vue'

//定义一个参数和函数传递给子组件
const count = ref(123);
const func = (params) => {
  count.value = params
};

//定义一个参数compRe接收子组件中暴露的参数和函数
const compRef=ref(null);
//在onMounted函数中调用子组件中的参数和函数
onMounted(()=>{
  console.log(compRef.value.a);
  compRef.value.funca();
});
</script>

代码截图: