使用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代替

13、用v-show控制组件的显隐时，组件不会重新渲染，可以改用v-if，但是会有较高的性能开销