复活赛打赢了

离谱 2024/4/8 新的开始

# 新的开始

想起自己还有一个尘封已久的小博客,今天也是突然想来好好经营了,希望能够好好坚持下去叭
也是暂时决定在前端这一块领域进行深耕了,此博客也就记录下我深入学习vue3的过程吧

为了写博客还速成了一下md

由此,这也是我第一篇***深度学习***vue3的笔记

# 重识父子组件传参

# 子传父

父组件

<template>
<div>我是父组件</div> 
<children :title="name"></children>
</template>

<script setup lang = 'ts'>
//省略一些引用
let name = '离谱'

</script>

1
2
3
4
5
6
7
8
9
10

子组件

<template>
<div>我是子组件</div> 
<div>我收到了父组件传来的值 =======> {{title}}</div>
<div>我收到了父组件传来的值 =======> {{arr}}</div>
</template>

<script setup lang = 'ts'>
//省略一些引用
//definrProps是编译器的宏函数,不需要引用就可以直接使用
defineProps<{
    title: string,
    arr: any[]
}>()
//如果子组件没有传参,父组件设置默认值
withDefaults(defineProps<{
    title: string,
    arr: number[]
}>(),{
    title: '我是默认值',
    arr: () => ['我是默认数组']
    //定义复杂数据类型需要函数返回,防止引用
})

//请注意,如果要在ts代码中使用子组件传来的值,需要在父组件中用变量接收才能使用

const props = defineProps<{
    title: string,
    arr: number[]
}>()

console.log(props.title)
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 父传子(父组件调用子组件方法)

子组件

<template>
<div>我是子组件,给父组件传方法</div> 
<button @click='send'>给父组件传值</button>
</template>

<script setup lang = 'ts'>
//省略一些引用
//这是只有ts语法中支持的
const emit = defineEmits<{
    (e:'on-click',name: srting):viod
}>()
//'on-click'表示传输的方法,:viod表示该方法的类型

//当然,还有另外一种方式使用defineEmits
const emit = defineEmits(['on-click'])
const send = () => {
    emit('on-click','离谱')
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

父组件

<template>
<div>我是父组件</div> 
<children @on-click='getName' :title="name"></children>
</template>

<script setup lang = 'ts'>
//省略一些引用
//把从子组件中拿到的name作为这个函数的参数
const getName = (name:string) => {
    console.log(name)
}

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

到此为止,是常见的两种传参函数,但如果就此结束,又何谈***深度学习***

# defineExpose()函数的使用

当子组件需要暴露一些方法或者变量的时候,可以使用defineExpose()

子组件

defineExpose({
    name: '离谱'
    open: () => console.log(1)
})

1
2
3
4

父组件接收

<template>
<children ref='childrenExpose'></children>
</template>

<script>
    //要和 ref='name' 名称保持一致
    const childrenExpose = ref<InstanceType<typeof children>>()
    console.log(childrenExpose.value.name);
    //即children组件中的变量name可以在父组件中进行访问
    childrenExpose.value.open
    //children组件中的方法open可以在父组件中进行使用
</script>

1
2
3
4
5
6
7
8
9
10
11
12

defineExpose()函数被广泛的使用在组件开发当中,它的作用就是让父组件能够访问到子组件的属性和方法,实现复用

重新学习vue3第一天
写于第四阅览室

离谱的blog

Choose mode