前言
这个项目是新起的,另外也没有注意 vue 版本的更新,所以在写组件传值的时候,还是使用以前的习惯。
对于父子组件间的传值,我的习惯是这样的:
1
2
3
4
5
6
7
8
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: "",
},
});
</script>
其实可以不显示的定义 props
,但是考虑后面操作要使用到 props
的值,就显示定义 props
了。
那这就是我以前的习惯,默认值通过 default
定义,而后续使用到 props
的值时,就这样使用:
1
2
3
4
5
6
7
8
9
10
11
<script setup lang="ts">
const props = defineProps({
title: {
type: String,
default: "",
},
});
const handleClick = () => {
console.log(props.title);
};
</script>
而对于 props
里的值,可以使用解构(我觉得不太方便),就像这样:
1
2
3
4
5
6
<script setup lang="ts">
const { title } = props; // 解构
const handleClick = () => {
console.log(title);
};
</script>
但是这样解构方式是不合理的,也是不生效的。这样解构出来的 title
不具有响应式特性,而且在 template
中也不生效。因此,需要解构时,必须配合 toRefs
使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup lang="ts">
import { toRefs } from "vue";
const props = defineProps({
title: {
type: String,
default: "",
},
});
const { title } = toRefs(props); // 解构
const handleClick = () => {
console.log(title.value); // 解构出来的 title 具有响应式特性
};
</script>
vue3.5 版本的写法
摒弃了辅助函数 toRefs
,也不再需要通过 default
来定义默认值。
解构写法
1
2
3
4
5
6
7
8
9
10
11
<script setup lang="ts">
const { title } = defineProps({
title: {
type: String,
},
});
const handleClick = () => {
console.log(title); // 不需要使用 .value
};
</script>
这种写法更加简洁了,不需要使用 toRefs
辅助函数,爱上了!
props 默认值
可以在解构的时候直接赋值。
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts" name="my-card">
// 这里的 title 就是默认值
const { title = "你好" } = defineProps({
title: {
type: String,
},
});
const handleClick = () => {
console.log(title);
};
</script>
一般写法
这样在 defineProps
里使用对象定义 title
的类型还是很明确的,但有些不太符合 ts
的风格,所以针对 ts
,一般可以这样写:
1
2
3
4
5
6
7
<script setup lang="ts" name="my-card">
const { title = "你好" } = defineProps<{ title?: string }>();
const handleClick = () => {
console.log(title);
};
</script>
但是,如果是 js
,那还得使用对象定义:
1
2
3
4
5
<script setup lang="js" name="my-card">
const { title = "你好" } = defineProps({
title: String,
});
</script>