Vue3 第三十七篇：defineProps、defineEmits、defineExpose、provide / inject

1.父组件操作子组件：

defineProps：子组件接收父组件传参（使用场景：父组件向子组件传参）

// 父组件
<template>
  <Child :name="name"></Child>
</template>
 
 
//子组件
const props = defineProps({
  name: {
    type: String,
    default: ""
  }
});

defineEmits：子组件向父组件暴露事件(使用场景：父组件要调用子组件的方法)

// 父组件
<template>
  <Child  @getdata="getdata"></Child>
</template>
<script>
   const getdata = (e: string) => {
     console.log(e);
   };
</script>
 
//子组件
import { defineEmits } from "vue"
<template>
  <button @click="handleClick">暴露</button>
</template>
<script>
   const emits = defineEmits(["getdata"]);
   const handleClick = () => {
     emits("getdata", "子组件向父组件传递数据");
   };
</script>

defineExpose：父组件获取子组件的数据和方法（使用场景：父组件要调用子组件的数据或方法）

// 父组件
<template>
  <Child ref="childExpose"></Child>
  <button @click="handelcount">子组件暴露</button>
</template>
<script>
   // 拿到子组件实例
   const childExpose = ref();
   const handelcount = () => {
    //获取子组件的数据或方法
     console.log(childExpose.value.count);
   };
</script>
 
// 子组件
<script>
   //子组件将数据或方法暴露出去
   defineExpose({
     count: 1
   })
</script>

2.子组件操作父组件：

provide ：父组件提供给子组件的数据或方法

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

//提供
provide("getList",getList)

function getList() {
    console.log(123456)
}
</script>
<template>
    <child/>
</template>

inject：子组件获取父组件提供的数据或方法

<script setup>
import { reactive, inject } from 'vue'

//获取
const getList = inject('getList')

//调用
getList()

</script>
<template>
</template>