【基础知识】Vue3中父传子、子传父、ref模板引用、跨组件通信

父子通信
说明：vue3中组件导入即可使用，无须注册
父传子
1、静态数据传入
2、响应式数据传入 

defineProps()（编译器宏函数）

 

 

子传父

defineEmits()（编译器宏函数） 

  

ref模板引用

通过ref标识获取真实的dom对象或者组件实例对象。
1、调用ref空函数
2、通过ref绑定ref的对象

<script setup>

  import { ref, onMounted } from 'vue'

  const h1Ref = ref(null)

  onMounted(() => {

    console.log(h1Ref.value);

  })

</script>

<template>

  <h1 ref="h1Ref">这是一个标题</h1>

</template>

 

跨组件通信（爷孙）

 

provide和inject：顶层组件（爷爷等等）向任意底层组件（孙子等等）传递数据和方法，实现跨层组件通信。
顶层组件修改数据，可以直接改。
1、顶层通过provide函数提供数据provide('key',顶层组件数据)
2、底层通过inject函数获取数据const msg = inject('key')

3、底层组件修改顶层数据，可以通过传递方法过去，在底层调用修改方法。

 

其他：
vue3中<script setup>中组件内部方法和属性是不开放给父组件的，但是可通过defineExpose编译宏指定。