根据自己的使用习惯，设置vscode的vue代码片段，推荐使用snippet-generator.app
"vue3模版": {
"prefix": "vue3",
"body": [
"<template>",
" <div class='${1:box}'></div>",
"</template>",
" ",
"<script setup lang='ts'>",
" import {ref,reactive} from \"vue\";",
" ${3}",
"</script>",
" ",
"<style lang=\"scss\" scoped>",
" .${2:box} {",
" }",
"</style>"
],
"description": "vue3模版"
}
复制代码ref和reactive
ref一般用于基本的数据类型，比如string，boolean reactive一般用于对象 ref的地方其实也是调用的reactive实现的。
子组件传父组件
子组件
<template>
<div class="child"></div>
</template>
\
<script setup lang="ts">
import { ref, reactive } from "vue";
function doSth() {
console.log(333);
}
defineExpose({ doSth });
</script>
\
<style lang="scss" scoped>
.child {
}
</style>
\
\
复制代码父组件
<template>
<div class="father" @click="doSth1">222</div>
<Child ref="childRef"></Child>
</template>
\
<script setup lang="ts">
import { ref, reactive } from "vue";
import Child from "./Child.vue";
const childRef = ref();
function doSth1() {
childRef.value.doSth();
}
</script>
\
<style lang="scss" scoped>
.father {
}
</style>
\
\
复制代码父组件传子组件
父组件
<template>
<div class="father"></div>
<Child @click="doSth"></Child>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Child from "./Child.vue";
function doSth() {
console.log(112);
}
</script>
<style lang="scss" scoped>
.father {
}
</style>
复制代码子组件
<template>
<div class="child">2222</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const emits = defineEmits(["doSth"]);
onMounted(() => {
emits("doSth");
});
</script>
<style lang="scss" scoped>
.child {
}
</style>
复制代码toRefs
当从父组件向子组件传props的时候，必须使用toRefs或者toRef进行转一下，这是为什么呢？
这里是因为如果不使用toRefs转一次的话，当父组件中的props改变的时候，子组件如果使用了Es6的解析，会失去响应性。
可以看下如下例子
父组件
<template>
<div class="father" @click="changeVal">{{ fatherRef }}</div>
<Child :fatherRef="fatherRef"></Child>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Child from "./Child.vue";
const fatherRef = ref(1);
function changeVal() {
fatherRef.value = 2;
}
</script>
<style lang="scss" scoped>
.father {
margin-bottom: 40px;
}
</style>
复制代码子组件
<template>
<div class="child" @click="changeVal">{{ fatherRef }}</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, toRefs } from "vue";
const props = defineProps<{
fatherRef: any;
}>();
const { fatherRef } = props;
function changeVal() {
fatherRef.value = 34;
}
</script>
<style lang="scss" scoped>
.child {
}
</style>
复制代码可以看到当父组件如果点击之后，因为使用const { fatherRef } = props;进行解析，就失去了响应性
所以当父组件变成2的时候，子组件还是1。
这里有两种解决办法
- 使用const { fatherRef } = toRefs(props);
- 在模版中中使用props.fatherRef