7.Vue3 父子组件通信

父组件给子组件传参

父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值，

如以下代码

给Menu组件 传递了一个title 字符串类型是不需要v-bind

<template>
    <div class="layout">
        <Menu  title="我是标题"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>

传递非字符串类型需要加v-bind 简写 冒号

<template>
    <div class="layout">
        <Menu v-bind:data="data"  title="我是标题"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
</script>

子组件接受值 TS版

通过defineProps 来接受 defineProps方法是无须引入的直接使用即可

如果我们使用的TypeScript,可以使用传递字面量类型的纯类型语法做为参数。

如=>这是TS特有的写法

<template>
    <div class="menu">
        菜单区域 {{ title }}
        <div>{{ data }}</div>
    </div>
</template>
 
<script setup lang="ts">
defineProps<{
    // 表明该属性是可选的
    title?:string,
    // 没有？表明该属性是必传的
    data:number[]
}>()
</script>

TS特有的默认值方式

withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

type Props = {
    title?: string,
    data?: number[]
}
// 通过withDefaults设置默认值 感觉没有原生的简洁易读
withDefaults(defineProps<Props>(), {
    title: "张三",
    data: () => [1, 2, 3]
})

如果你使用的不是TS

defineProps({
    title:{
        // 该属性的类型
        type:String
        // 该属性是否必传
        required:false,
        // 该属性的默认值
        default:"",
    },
    data:Array,
    obj:{
         default:()=>{
             return {}
         },
         type:object
    }
})

子组件给父组件传参

是通过defineEmits派发一个事件

<template>
    <div class="menu">
        <button @click="clickTap">派发给父组件</button>
    </div>
</template>
 
<script setup lang="ts">
import { reactive } from 'vue'

const list = reactive<number[]>([4, 5, 6])

// 注册一个自定义事件
const emit = defineEmits(['on-click'])

const clickTap = () => {
    // 发出自定义事件
    emit('on-click', list)
}
</script>

我们在子组件绑定了一个 click 事件 然后通过 defineEmits 注册了一个自定义事件

点击 click 触发 emit 去调用我们注册的事件 然后传递参数

父组件接受子组件的事件

<template>
    <div class="layout">
        <Menu @on-click="getList"></Menu>
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
 // 自定义事件的处理函数
const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}
</script>

我们从Menu父组件监听子组件派发的事件on-click后面是我们自己定义的函数名称getList

会把参数返回过来

子组件暴露给父组件内部属性

通过 defineExpose

我们从父组件获取子组件实例通过ref

 <Menu ref="menus"></Menu>
 const menus = ref(null)
 onMounted(() => {
   console.log(menus.value.list) // undefined
})

然后打印menus.value发现没有任何属性

这时候父组件想要读到子组件的属性可以通过defineExpose暴露

const list = reactive<number[]>([4, 5, 6])

defineExpose({
    list
})

自组件通过defineExpose暴露之后就父组件就可以读到了