知识点！知识点！！知识点！！！

例子使用组合式Api的写法。

父传子

1.props方式

父组件

// addUserDialog是导入的子组件
// :dialogTitle = 'dialogTitle' 写法与vue2一样
 <addUserDialog
    v-model="dialogFormVisible"
    v-if="dialogFormVisible"
    :dialogTitle = 'dialogTitle'    
    :dialogRowValue = 'dialogRowValue'
    @initUserList = 'initGetUserList'/>

子组件

// 需要引入defineProps
import { defineProps } from 'vue'

// 定义一个变量拿到父组件传来的值
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogRowValue: {
    type: Object,
    default: () => {}
  }
})

// 使用：props.xxx即可拿到数据
console.log(props.dialogRowValue)

2.Provide / Inject

他两为依赖注入

Provide：指定提供给后代的数据

Inject：作为后代接收数据，不管有多少层都可以拿来使用

父组件

import { provide } from 'vue'
provide('name','张三')

后代组件

<script setup>
import { inject } from 'vue'
const name = inject('name')
console.log(name)   // 张三
</script>

3.expose/ref

官方文档上说： expose：一个将暴露在公共组件实例上的 property 列表。为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose

// 子组件
import { defineExpose } from 'vue'
defineExpose({
  name:'子组件属性',
  selectList() {
    console.log('子组件方法')
  }
})

// 父组件
<template>
<child ref="childcomp"/>
</template>

import { ref } from 'vue'
const childcomp = ref(null)
const clickBtn = () => {
  console.log(childcomp.value.name)  // 得到子组件属性
  comp.value.selectList()  // 得到子组件方法
}

子传父

1. emit方式和v-model的方式

在v-model的方式中 update:xxx是固定的写法子组件

// 需要引入defineEmits
import { defineEmits } from 'vue'

// emit自定义事件，并传值或者不传值
const emits = defineEmits(['update:modelValue', 'initUserList'])
const handleClose = () => {
  // v-model的方式
  emits('update:modelValue', false)
}

// emit方式
emits('initUserList')

父组件

<addUserDialog
    v-model="dialogFormVisible"  // v-model
    v-if="dialogFormVisible"
    :dialogTitle = 'dialogTitle'
    :dialogRowValue = 'dialogRowValue'
    @initUserList = 'initGetUserList'/>  // 接收事件
    
const initGetUserList = async () => {
  const res = await getUserList(queryInfo.value)
  tableData.value = res.rows
  total.value = res.total
}

兄弟组件

在vue3中已经移除了事件总线。（虽然不推荐，但是简单粗暴，老爱用它。）

我目前想到的就是状态管理工具，Vuex和Pinia。比较复杂，有时间单独补补课。

Vue3组件的通信方式