vue3+ts笔记

父传子

父组件传值

 <HelloWorld msg="盛典" /> //父组件

子组件接收

 defineProps<{ //ts传值接受
  name: string
  }>()

子传父

子组件传值

  <button @click="click_aa">点击</button>
  
  /*ts专有*/
   const emit = defineEmits<{
     (e: 'clickThis', num: string): void
     (e: 'btn', num: string): void
   }>()

    let click_aa = () => {
      emit('clickThis', '盛典')
      emit('btn', '1')
    }

父组件接收

 <HelloWorld msg="盛典"  @clickThis="clickThis" @btn="btn"/> //父组件
   let clickThis = (val: any) => {
       console.log(val);
   }
   let btn = (val: any) => {
     console.log(val);
   }

路由创建

npm install vue-router@4

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
//RouteRecordRaw内置接口类型(路由)
const routes: RouteRecordRaw[] = [
    {
        path: '/', component: () => import('../views/home/home.vue'),
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router


const app = createApp(App)
app.use(router)