Vue3 基础技术总结二

setup 语法糖

想获取原来 Setup 函数中的 context 和 props 需要用到下面的函数：

<script setup>
import {defineProps,withDefaults} from "vue"

defineProps({
  title: String,
  count: Number,
});
console.log(title, count);

//只接收，没任何限制
const props = defineProps(["title","count"]);
console.log(props.title, props.count);

//接收list + 限制类型
defineProps<{list?:Persons}>();

//接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{list?:Persons}>(),{
  list:()=>[{id:"1",name:"kss",age:10}]
})
</script>

<script setup>
const emit = defineEmits(["update"]);
function updateTitle(newTitle) {
  emit("update", newTitle);
}
</script>

<script setup>
  import {(useAttrs, useSlots)} from 'vue' const attrs = useAttrs(); const slots
  = useSlots(); console.log(attrs); // 非 props 的属性 console.log(slots); //
  插槽内容
</script>

要点总结：

• 添加 name 属性和安装插件，可以给组件重命名。
• props：通过 defineProps 定义并直接使用。
• emit：通过 defineEmits 定义并触发事件。
• attrs 和 slots：通过 useAttrs 和 useSlots 获取。

路由

路由配置文件代码如下：

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
  ],
});
export default router;

main.ts代码如下：

import router from "./router/index";
app.use(router);

app.mount("#app");

• App.vue代码如下

  <template>
    <div class="app">
      <h2 class="title">Vue路由测试</h2>
      <!-- 导航区 -->
      <div class="navigate">
        <RouterLink to="/home" active-class="active">首页</RouterLink>
        <RouterLink to="/news" active-class="active">新闻</RouterLink>
        <RouterLink to="/about" active-class="active">关于</RouterLink>
      </div>
      <!-- 展示区 -->
      <div class="main-content">
        <RouterView></RouterView>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup name="App">
  import { RouterLink, RouterView } from "vue-router";
  </script>

要点总结：

• 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
• 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。