从今天开始记录一下,在使用vue3的过程中遇到的知识点,会随时补充~,如果有错误,请帮忙指正~~
1、父组件传给子组件的变量,在子组件中想要进行监听
const props = defineProps({
status: String,
disabled: {
type: Boolean,
default: false,
},
});
① 监听单个变量
watch(
props.status,
(newVal, oldVal) => {
console.log("🚀 ~ watch ~ newVal:", newVal);
...
{ immediate: true } //初始化的时候也会触发执行一次
);
② 监听多个变量
watch(
[() => props.status, () => props.disabled],
(newVal, oldVal) => {
console.log("🚀 ~ newVal123:", newVal);
...
},
{ immediate: true } //初始化的时候也会触发执行一次
);
此时newVal和oldVal是一个数组
2、父子组件之间相互传值
父组件:
<ScButton
:status="status"
@openScene="openScene"
@stopScene="stopScene"
:disabled="disabled"
/>
const openScene = (val) => {
console.log(val);
};
const stopScene= () => {
...
};
子组件:
① 父组件给子组件传值,子组件可以通过 defineProps接收
const props = defineProps({
status: String,
disabled: {
type: Boolean,
default: false,
},
});
使用:
if (props.disabled == true && props.status == "false") {
showToast({
message: "哈哈哈哈哈哈哈哈",
});
}
② 子组件给父组件传值或触发父组件的事件,子组件通过defineEmits接收父组件传的事件
const emits = defineEmits(["openScene", "stopScene"]);
if (props.status == "true") {
emits("stopScene");
} else if (props.status == "false" && props.disabled == false) {
emits("openScene",'hhh'); // 子组件调用父组件的openScene函数,并传给父组件一个值,父组件可以在该函数中接收
}
3、storeToRefs
使用pinia进行数据存储,在页面中使用时,直接从store通过解构获取数据,该数据不具有响应式,需要用storeToRefs将store包裹起来
import { storeToRefs } from "pinia";
const store = useStore();
const { indoorTemp, setHumidity } = storeToRefs(store);
4、父组件给子组件传值的时候,加冒号和不加冒号的区别
如果父组件给子组件传的是一个变量的话需要加冒号,如果只是一个值的话就不需要加冒号
5、var(–变量)的使用
动态改变css中属性的值
<div
class="popupContainer"
:style="{
'--minHeight': minHeight,
}"
>
</div>
let minHeight = ref(''); //可以在js中动态改变minHeight的值
.popupContainer {
min-height: var(--minHeight);
}
6、使用axios从后端获取数据并赋值时遇到的问题
定义了一个数组values,通过axios从后端获取数据并赋值给该数组,再通过onMounted钩子进行页面渲染。但是在我进入页面后却发现页面并没有被渲染。。。
getTrainingMeans().then((res) => {
values=res.data.data;
});
原因:values经过被重新赋值后失去了响应式的特征
修改代码:
getTrainingMeans().then((res) => {
values.push(...res.data.data);
});
7、跳转页面后可以回到原先的页面
通过独享路由守卫beforeEnter
{
path: '/detail/:id',
name: 'detail',
component: () => import('../components/question/Detail.vue'),
beforeEnter: (to, from) => {
console.log("🚀 ~ file: index.js:40 ~ from:", from)
sessionStorage.setItem("path", from.fullPath)
}
}
在需要使用的页面
const onClickLeft = () => {
router.push(sessionStorage.getItem("path"));
};
8、隐藏滚动条
① 隐藏所有滚动条:在App.vue中添加代码
<style lang="scss">
/* 隐藏所有滚动条 */
::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;
height: 0;
}
</style>
② 隐藏使用el-table时的滚动条:父组样式中使用
/* 隐藏滚动条 */
overflow-y: scroll;
flex-direction: column;
&::-webkit-scrollbar {
width: 0;
}
9、布局:左侧为菜单栏,右侧内容铺满
.main-container {
display: flex;
flex-direction: row;
/*左侧菜单*/
.el-menu {
width: 237px;
}
/* 右侧内容*/
.iframe {
flex: 1;
}
}
10、vue3+vite项目动态引入图片
<template>
<img
:src="imgSrc(item.label)"
alt=""
/>
</template>
<script>
const imgSrc = (url) => {
return new URL(`../../../assets/img/${url}icon.svg`, import.meta.url).href;
};
</script>
11、el-table的sortable排序不准确
极有可能是排序的字段类型不是数字,而是字符串!将它转为整形或者浮点型就好了
12、v-show在template标签中不起作用
可以使用v-if代替