弑
弑君者
V1
2022/08/05阅读:12主题:默认主题
Vue3 + setup + ts 使用总结
阅读vue的英文官网
中文的vue官网比vue的英文官网差很多,不管学什么都要去获取第一手资料,不要看中文官网,直接去看英文官网!!!
根据自己的使用习惯,设置vscode的vue代码片段,推荐使用https://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模版"
}
组件引入
当使用setup的时候,组件直接引入就可以了,不需要再自己手动注册
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
子组件使用v-model
可以在子组件中使用computed,实现双向绑定
父组件
<template>
<div class="father">{{ fatherRef }}</div>
<Child :fatherRef="fatherRef" @changeVal="changeVal"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const fatherRef = ref("1");
function changeVal(val: string) {
fatherRef.value = val;
}
</script>
<style lang="scss" scoped>
.father {
margin-top: 40px;
margin-bottom: 40px;
}
</style>
子组件
<template>
<!-- <div class="child">{{ props.fatherRef }}</div> -->
<input type="text" v-model="inputVal" />
</template>
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{
fatherRef: string;
}>();
const emits = defineEmits(["changeVal"]);
const inputVal = computed({
get() {
return props.fatherRef;
},
set(val: string) {
emits("changeVal", val);
},
});
</script>
<style lang="scss" scoped>
.child {
}
</style>
可以从父组件传递值和改变值的方法,然后子组件也可以使用v-model
例子中父组件传递 modelValue和update:modelValue方法 父组件:
<template>
<Child :modelValue="searchText" @update:modelValue="changeVal"> </Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const searchText = ref(1);
function changeVal(val: number) {
searchText.value = val;
}
</script>
<style lang="scss" scoped>
.father {
margin-top: 40px;
margin-bottom: 40px;
}
.btn {
font-size: 20px;
color: red;
}
</style>
子组件:
<template>
<!-- <div class="child">{{ props.fatherRef }}</div> -->
<!-- <div v-bind="attrs">
<slot name="test1">11</slot>
<input type="text" v-model="inputVal" />
</div> -->
<input v-model="modelValue" />
</template>
<script setup lang="ts">
import { computed, useAttrs, useSlots } from "vue";
const props = defineProps<{
modelValue: number;
}>();
// const emits = defineEmits(["changeVal"]);
</script>
<style lang="scss" scoped>
.child {
}
</style>
使用useAttrs和useSlots
useAttrs 可以获取父组件传过来的id和class等值。 useSlots 可以获得插槽的内容。 例子中,我们使用useAttrs获取父组件传过来的id和class,useSlots获取插槽的内容。
父组件:
<template>
<div class="father">{{ fatherRef }}</div>
<Child :fatherRef="fatherRef" @changeVal="changeVal" class="btn" id="111">
<template #test1>
<div>1223</div>
</template>
</Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
const fatherRef = ref("1");
function changeVal(val: string) {
fatherRef.value = val;
}
</script>
<style lang="scss" scoped>
.father {
margin-top: 40px;
margin-bottom: 40px;
}
.btn {
font-size: 20px;
color: red;
}
</style>
子组件:
<template>
<!-- <div class="child">{{ props.fatherRef }}</div> -->
<div v-bind="attrs">
<slot name="test1">11</slot>
<input type="text" v-model="inputVal" />
</div>
</template>
<script setup lang="ts">
import { computed, useAttrs, useSlots } from "vue";
const props = defineProps<{
fatherRef: string;
}>();
const emits = defineEmits(["changeVal"]);
const slots = useSlots();
const attrs = useAttrs();
console.log(122, attrs, slots);
const inputVal = computed({
get() {
return props.fatherRef;
},
set(val: string) {
emits("changeVal", val);
},
});
</script>
<style lang="scss" scoped>
.child {
}
</style>
作者介绍
弑
弑君者
V1